為...冠名 <image> SVG的

Question

我試圖為SVG的img命名。 標題在圖片的底部。 代碼如下：

<svg>
  <image>
</svg>

不使用內部怎么實現呢？ 如果可能的話，我也想基於D3.js進行開發。

謝謝。

Answer 1

在SVG元素中，您不使用title屬性。 您必須使用<title>元素，並將其放入要應用的元素內。

 <svg> <image xlink:href="http://lorempixel.com/300/150/" width="300" height="150"> <title>foobar</title> </image> </svg> 

Answer 2

您可以簡單地在圖像下方放置一段文字。 將文字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>