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>

当我尝试将文本锚定在图像下方时，文本消失。我怎么做

更改图像的大小？
在图像底部留下人员姓名的空间？

以下是摘录：

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

这可能是您所需要的：

您可以使用css更改图像的大小，它会缩放所有svg。
您只需要为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>

用<text>元素标题SVG？

1 个答案: