I'm working on a program which generates SVG maps. Some of the map items have captions which need a symbol after them (like a plane symbol for an airport caption).
我正在研究一个生成SVG地图的程序。某些地图项目的标题后面需要一个符号（如机场标题的平面符号）。
If I have a text element thus
如果我有一个文本元素
<text x="30" y="30">Pericles</text>
I can place another bit of text at the next character position by saying
我可以通过说，在下一个字符位置放置另一个文本
<text x="30" y="30">Pericles <tspan>!</tspan></text>
but I'd like to draw my own symbol at that position with a <path> element.
但我想用
What I'm doing at the moment is having the generating program guess the extent of the text from tables of font metrics etc, but this isn't accurate enough to place the symbol consistently.
我现在正在做的是让生成程序从字体度量表等表中猜测文本的范围，但这不足以使符号一致地放置。
Is there any way round this - like specifying a <marker> to be used when drawing the text, and using a tspan with an invisible dash in it or something to get the marker placed?
是否有任何方法围绕这一点 - 比如指定在绘制文本时使用的
2 个解决方案
#1
1
It's possible to place any piece of markup where you want by using some scripting. E.g you can use yourTextElm.getBBox() for finding where the text ends or if you need to be a bit more specific you can use the SVG DOM methods for text elements.
可以使用一些脚本将任何标记放在您想要的位置。例如，您可以使用yourTextElm.getBBox（）来查找文本结束的位置，或者如果需要更具体一些，可以将SVG DOM方法用于文本元素。
If you need it to be fully static without scripting, then defining a font to have the shapes you need is probably the way to go. You can make a custom truetype font if need be, that would work for all the browsers that support webfonts (if you're worried about firefox not supporting svgfonts currently).
如果你需要它在没有脚本的情况下是完全静态的，那么定义一个字体以获得你需要的形状可能就是要走的路。如果需要，你可以制作一个自定义的truetype字体，这适用于所有支持webfonts的浏览器（如果你担心firefox目前不支持svgfonts）。
#2
0
The most straight-forward solution I can think of is still pretty complicated and will not work in some SVG browsers:
我能想到的最直接的解决方案仍然相当复杂，并且在某些SVG浏览器中不起作用：
Set the tspan containing the symbol to a font named something like my-symbol-font. Then create the font using the SVG Fonts standard. You only need to define one character (or glyph) in your situation, since you only need the one symbol replacement. Define the glyph as the symbol you want to use to replace the ! and set the glyph's unicode to !. It would be something like:
将包含符号的tspan设置为名为my-symbol-font的字体。然后使用SVG字体标准创建字体。您只需要在您的情况下定义一个字符（或字形），因为您只需要替换一个符号。将字形定义为要用来替换的符号！并将字形的unicode设置为！它会是这样的：
`<glyph unicode="!">`
You should read over the SVG documentation on fonts to get the exact details on how this is done, but if the browser supports SVG fonts it should work. I know that WebKit (Safari/Chrome) supports them, but Firefox, at least 3.5, does not. (FF 3.6 may, I haven't checked).
您应该阅读有关字体的SVG文档以获取有关如何完成此操作的确切详细信息，但如果浏览器支持SVG字体，则应该可以使用。我知道WebKit（Safari / Chrome）支持它们，但Firefox（至少3.5）不支持它们。 （FF 3.6可能，我没有检查过）。
Also, a cheat that may be helpful, if you have Adobe Illustrator, is to create an SVG using normal text with the last character using a WingDings font. When you save it, Illustrator will ask if you want to embed the fonts used into the SVG using SVG fonts. You can specify that you only want to do this for characters used in the SVG (instead of the entire font set). You could then view the SVG as text to see how it created the wingdings font and single glyph and even copy the entire thing and change the font name to the one you want to use and the glyph's path to your symbol's path. In fact, I might try doing this myself later when I'm at a computer with Illustrator. I'll post a sample if it works the way I expect it to.
另外，如果你有Adobe Illustrator，可能有用的作弊是使用普通文本创建一个SVG，最后一个字符使用WingDings字体。保存时，Illustrator会询问您是否要使用SVG字体将所使用的字体嵌入到SVG中。您可以指定只对SVG中使用的字符（而不是整个字体集）执行此操作。然后，您可以将SVG视为文本，以查看它如何创建wingdings字体和单个字形，甚至复制整个内容并将字体名称更改为您要使用的字体名称和字形到符号路径的路径。事实上，当我在使用Illustrator的计算机上时，我可能会尝试自己这样做。如果它按照我期望的方式工作，我会发布一个样本。
Good luck.
祝你好运。
#1
1
It's possible to place any piece of markup where you want by using some scripting. E.g you can use yourTextElm.getBBox() for finding where the text ends or if you need to be a bit more specific you can use the SVG DOM methods for text elements.
可以使用一些脚本将任何标记放在您想要的位置。例如，您可以使用yourTextElm.getBBox（）来查找文本结束的位置，或者如果需要更具体一些，可以将SVG DOM方法用于文本元素。
If you need it to be fully static without scripting, then defining a font to have the shapes you need is probably the way to go. You can make a custom truetype font if need be, that would work for all the browsers that support webfonts (if you're worried about firefox not supporting svgfonts currently).
如果你需要它在没有脚本的情况下是完全静态的，那么定义一个字体以获得你需要的形状可能就是要走的路。如果需要，你可以制作一个自定义的truetype字体，这适用于所有支持webfonts的浏览器（如果你担心firefox目前不支持svgfonts）。
#2
0
The most straight-forward solution I can think of is still pretty complicated and will not work in some SVG browsers:
我能想到的最直接的解决方案仍然相当复杂，并且在某些SVG浏览器中不起作用：
Set the tspan containing the symbol to a font named something like my-symbol-font. Then create the font using the SVG Fonts standard. You only need to define one character (or glyph) in your situation, since you only need the one symbol replacement. Define the glyph as the symbol you want to use to replace the ! and set the glyph's unicode to !. It would be something like:
将包含符号的tspan设置为名为my-symbol-font的字体。然后使用SVG字体标准创建字体。您只需要在您的情况下定义一个字符（或字形），因为您只需要替换一个符号。将字形定义为要用来替换的符号！并将字形的unicode设置为！它会是这样的：
`<glyph unicode="!">`
You should read over the SVG documentation on fonts to get the exact details on how this is done, but if the browser supports SVG fonts it should work. I know that WebKit (Safari/Chrome) supports them, but Firefox, at least 3.5, does not. (FF 3.6 may, I haven't checked).
您应该阅读有关字体的SVG文档以获取有关如何完成此操作的确切详细信息，但如果浏览器支持SVG字体，则应该可以使用。我知道WebKit（Safari / Chrome）支持它们，但Firefox（至少3.5）不支持它们。 （FF 3.6可能，我没有检查过）。
Also, a cheat that may be helpful, if you have Adobe Illustrator, is to create an SVG using normal text with the last character using a WingDings font. When you save it, Illustrator will ask if you want to embed the fonts used into the SVG using SVG fonts. You can specify that you only want to do this for characters used in the SVG (instead of the entire font set). You could then view the SVG as text to see how it created the wingdings font and single glyph and even copy the entire thing and change the font name to the one you want to use and the glyph's path to your symbol's path. In fact, I might try doing this myself later when I'm at a computer with Illustrator. I'll post a sample if it works the way I expect it to.
另外，如果你有Adobe Illustrator，可能有用的作弊是使用普通文本创建一个SVG，最后一个字符使用WingDings字体。保存时，Illustrator会询问您是否要使用SVG字体将所使用的字体嵌入到SVG中。您可以指定只对SVG中使用的字符（而不是整个字体集）执行此操作。然后，您可以将SVG视为文本，以查看它如何创建wingdings字体和单个字形，甚至复制整个内容并将字体名称更改为您要使用的字体名称和字形到符号路径的路径。事实上，当我在使用Illustrator的计算机上时，我可能会尝试自己这样做。如果它按照我期望的方式工作，我会发布一个样本。
Good luck.
祝你好运。