Html 为<；图像>；SVG的应用

我试图为SVG的img设置一个标题。 标题在图片的底部。 代码如下所示：

<svg>
  <image>
</svg>

如何在不使用内部控制的情况下实现这一点？ 如果可能的话，我还想基于D3.js制作

---

谢谢。

您只需在图像下方放置一段文字即可。将文本y位置=图像高度+少量填充。或者你可以把y的位置比图像的高度小一点，它会落在图像的顶部

<?xml version="1.0" encoding="utf-8"?>
<!-- from this website http://tutorials.jenkov.com/svg/svg-and-css.html -->
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

    <image x="0" y="0" height="100" width="100" id="HVACEast" preserveAspectRatio="none" xlink:href="https://some.site.com/image.png" opacity="0.4" style="pointer-events: none"/>
    <text stroke-width=".05" fill="#66CCB2" x="5" y="105" font-family="serif" font-size="5pt">IMAGE TITLE</text>
</svg>

图像标题

或者使用tspan作为文本

<text>
    <tspan x="5" y="105" font-size="5pt" fill="yellow">Image</tspan>
    <tspan x="5" y="108" font-size="5pt" stroke="blue">Title</tspan>
</text>

形象
标题

在SVG元素中，不使用title属性。您必须使用

元素，将其放在应用该元素的元素中

福巴

如中所示，您希望鼠标悬停在其上时，会显示滚动标题吗？

svg title=“foobar”

或

image=“foobar”

是否产生了任何成功或显著的行为？你的意思是

或
？我的意思是
或
。我的错。你试过了吗？如果是的话，你得到了什么行为？没有改变。只有那张照片，对不起。我的错。光标周围有一个类似工具提示的小标记。但那不是我想要的。那确实是一种方式。但是不能很容易地包装这个词，对吗？您有其他方法或解决方法吗？SVG1.1没有文本换行。您可以使用tspan为您提供包装样式的文本。这是一个多一点的工作。请参见编辑原始答案。还有一个问题。我可以通过CSS更改的形状吗？我试过了，但没有成功。不，你不能。这就像HTML属性一样。