【发布时间】:2012-02-10 19:02:11
【问题描述】:
我正在尝试为一堆 SVG 图像统一标记。我的问题是我无法在标记定义中进行外部引用。它可能与问题How to reference external svg file in svg correctly? 相关联,但仍然缺少链接。
我做了一个小例子来演示我的问题:
b.svg(被引用):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<circle id="b" r="6" stroke="black" fill="green" />
<marker id="b_end"
orient="auto"
style="overflow:visible">
<use xlink:href="#b" />
</marker>
</defs>
</svg>
a.svg(试图引用 b.svg):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<circle id="a" r="6" stroke="black" fill="yellow" />
<marker id="a_end"
orient="auto"
style="overflow:visible">
<use xlink:href="#a" />
</marker>
<marker id="b_end"
orient="auto"
style="overflow:visible">
<use xlink:href="b.svg#b" />
</marker>
</defs>
<path d="m 10,10 20,20" style="marker-end:url(#a_end)" stroke="black" />
<path d="m 40,10 20,20" style="marker-end:url(#b_end)" stroke="black" />
<path d="m 70,10 20,20" style="marker-end:url(b.svg#b_end)" stroke="black" />
</svg>
如您所见,我通过内部 id 引用了第一行的标记(实际上是两个,因为标记也有引用)。这很好用。
我在第二行使用了内部标记定义和外部路径。它不起作用。 (线显示,标记不显示。)
我在第三行使用了外部标记。它也不起作用。
问题可能是外部内容不在托管 DOM 中 - 至少在解析样式中的引用时不会。
好的,但是我能做些什么呢?如何在 SVG 中为标记引用外部元素?
【问题讨论】:
-
您是否尝试在 Safari 或 Chrome 上执行此操作,因为我认为它们尚不支持外部引用。不过,这应该可以在 Firefox 和 Opera 中使用。
-
好的,很抱歉错过了这个细节。我的最终目标是从 DocBook 生成正确的 PDF :) 但我在 IE 和 Firefox 上尝试过也没有运气。
-
你说得对,我发布的确切代码在 Opera 上运行良好!我以前没试过。我仍然缺乏结论。我的 svg 代码是否正确,只是落后于当前渲染器的支持?
-
Bug report for Chromium 和 more generic bug 涵盖了外部 URL 的其他用法。 Webkit 的类似错误报告。