如何相对于svg文本的远端放置符号(路径)?

时间:2010-03-11 20:38:19

标签: text svg

我正在开发一个生成SVG地图的程序。一些地图项目的标题后面需要一个符号(如机场标题的平面符号)。

如果我有一个文本元素

<text x="30" y="30">Pericles</text>

我可以通过说

在下一个字符位置放置另一段文字
<text x="30" y="30">Pericles <tspan>!</tspan></text>

但是我想用&lt; path&gt;在那个位置绘制我自己的符号。元件。

我目前正在做的是让生成程序从字体度量表等表中猜测文本的范围,但这不足以使符号保持一致。

有没有办法围绕这个 - 比如指定一个&lt; marker&gt;在绘制文本时使用,并使用带有隐形破折号的tspan或其他东西来放置标记?

2 个答案:

答案 0 :(得分:1)

可以使用某些脚本将任何标记放在您想要的位置。例如,您可以使用yourTextElm.getBBox()来查找文本的结束位置,或者如果您需要更具体一些,可以使用SVG DOM methods for text elements

如果你需要它在没有脚本的情况下完全静态,那么定义一个字体以获得你需要的形状可能就是要走的路。如果需要,你可以制作一个自定义的truetype字体,这适用于所有支持webfonts的浏览器(如果你担心firefox当前不支持svgfonts)。

答案 1 :(得分:0)

我能想到的最直接的解决方案仍然相当复杂,并且在某些SVG浏览器中不起作用:

将包含符号的tspan设置为类似my-symbol-font的字体。然后使用SVG字体标准创建字体。您只需要在您的情况下定义一个字符(或字形),因为您只需要替换一个符号。将字形定义为要用于替换!的符号,并将字形的unicode设置为!。它会是这样的:

`<glyph unicode="!">`

您应该阅读SVG documentation on fonts以获取有关如何完成此操作的确切详细信息,但如果浏览器支持SVG字体,则应该可以正常工作。我知道WebKit(Safari / Chrome)支持它们,但Firefox(至少3.5)不支持它们。 (FF 3.6可能,我没有检查过。)

另外,如果你有Adobe Illustrator,可能有用的作弊是使用普通文本创建一个SVG,最后一个字符使用WingDings字体。保存时,Illustrator会询问您是否要使用SVG字体将所使用的字体嵌入到SVG中。您可以指定只对SVG中使用的字符(而不是整个字体集)执行此操作。然后,您可以将SVG视为文本,以查看它如何创建wingdings字体和单个字形,甚至复制整个内容并将字体名称更改为您要使用的字体名称和字形到符号路径的路径。事实上,当我在使用Illustrator的计算机上时,我可能会尝试自己这样做。如果它按照我期望的方式工作,我会发布一个样本。

祝你好运。