Externally defined markers don't appear in SVG

问题

I'm trying to make the markers unified for a bunch of SVG images. My problem is that I cannot make external references in marker definitions work. It may be connected to question How to reference external svg file in svg correctly? but a link is still missing.

I made a little example to demonstrate my problem:

b.svg (which is referenced):

<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 (trying to reference 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>

As you can see, I referenced the marker for the first line via an internal id (actually two since the marker has a reference, too). This works fine.

I used an internal marker definition with an external path for the second line. It doesn't work. (The line is diplayed, the marker isn't.)

I used an external marker in the third line. It doesn't work either.

The problem may be that the external content isn't in the hosting DOM - at least not when the reference in the style is resolved.

OK, but what can I do about it? How can I reference external elements for markers in SVG?

回答1:

I think I can answer my original question based on my experiments and on the comment left by Robert.

The code I wrote should work in SVG and it does work with Opera and Firefox. Plus it works when generating a PDF with Apache FOP which was the key point for me.

The only problem is that external referencing doesn't work in IE, Chrome and Safari. I'm not sure when external references from style definitions were implemented in Firefox: it doesn't work in 7.0 but it works in 11.

来源：https://stackoverflow.com/questions/9233279/externally-defined-markers-dont-appear-in-svg

标签

reference

svg

marker