用SVG字幕 <text> 元件？

Question

我刚接触SVG。 我正在尝试用该人的名字为该人的svg字幕。 这是我的尝试：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve">
<g>
<circle cx="129.375" cy="60" r="60"/>
<path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/>
<text text-anchor="middle" x="60" y="75">Person Name Here</text>
</g>
</svg>

当我尝试将文字锚定在图像下方时，文字消失。 我如何

1. 更改图像的大小？
2. 在图片底部留出空格以供人名使用？

这是代码段：

 var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text text-anchor="middle" x="60" y="75">Person Name Here</text></g></svg>' $('#name').append(svg); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="name">Hello</p> 

Answer 1

这可能是您需要的：

1. 您可以使用CSS更改图像的大小，它将缩放所有SVG。
2. 您只需要为viewBox提供更多空间并相应地放置您的名称即可。

希望这会有所帮助，摘要：

 var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 258.75 350.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <style>.style1 {font-size: 15px;} </style> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text class="style1" text-anchor="middle" x="125" y="290">Person Name Here</text></g></svg>' $('#name').append(svg); 

 svg, object { width: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="name">Hello</p>