用SVG字幕 <text> 元件？

Question

I am new to working with SVGs. 我刚接触SVG。 I am trying to caption an svg of a person with that person's name. 我正在尝试用该人的名字为该人的svg字幕。 Here is my attempt: 这是我的尝试：

<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>

When I try to anchor the text below the image the text disappears. 当我尝试将文字锚定在图像下方时，文字消失。 how do I 我如何

Change the size of the image? 更改图像的大小？
Leave space at the bottom of the image for the person's name? 在图片底部留出空格以供人名使用？

Here is the snippet: 这是代码段：

 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

This may be what you need: 这可能是您需要的：

You can change the size of the image with css, it will scale all your svg. 您可以使用CSS更改图像的大小，它将缩放所有SVG。
You just need to give some more space to the viewBox and position your name accordingly. 您只需要为viewBox提供更多空间并相应地放置您的名称即可。

Hope this helps, snippet: 希望这会有所帮助，摘要：

 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>

用SVG字幕 <text> 元件？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-07-18 20:30:15

用SVG字幕 <text> 元件？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-07-18 20:30:15

解决方案1
2 已采纳 2017-07-18 20:30:15