热门添加文本到svg

Question

我使用vue-svg映射和usa映射。

我需要在svg地图上显示状态代码(path.id(。我该怎么做？

<radio-svg-map
v-model="selectedLocation"
:map="usa"
:location-class="getLocationClass"
@change="selectdLocation"
@mouseover="pointLocation"
@mouseout="unpointLocation"
@mousemove="moveOnLocation"
/>

import usa from "../static/usa";

<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="192 9 1028 746"
aria-label="Map of USA"
>
<path
id="AK"
name="Alaska"
d="M456.18,..."
/>
...
</svg>

Answer 1

我假设您可以使用<text>SVG标记。

如果你使用Vue.JS，它将类似于：

<text>{{ path.id }}</text>

关于<text>标签的更多详细信息，您可以在这里阅读：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

附言：你的代码片段似乎有点坏了。