7

I have such a working main.svg file:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs id ="mydefs">
    <marker id="markerEnd" markerWidth="15" markerHeight="15" refX="7" refY="7" orient="auto">
        <path d="M0,0 l7,7 l-7,7" style="stroke: #000000;fill: none;"/>
    </marker>
</defs>
    <line x1="0" y1="0" x2="200" y2="200" stroke="black" marker-end="url(#markerEnd)"/>
</svg>

Now I wish to move defs into a separated file.

defs.svg:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs id ="mydefs">
    <marker id="markerEnd" markerWidth="15" markerHeight="15" refX="7" refY="7" orient="auto">
        <path d="M0,0 l7,7 l-7,7" style="stroke: #000000;fill: none;"/>
    </marker>
</defs>
</svg>

I could use: marker-end="url(defs.svg#markerEnd)", but I wish to inject id's from defs.svg to main.svg to still use marker-end="url(#markerEnd)".

How do I change my main.svg to use marker identificator from external defs.svg?

Such main.svg does not draw markerEnd:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <use xlink:href="defs.svg#mydefs" />
    </defs>
    <use xlink:href="defs.svg#mydefs" />
    <line x1="0" y1="0" x2="200" y2="200" stroke="black" marker-end="url(#markerEnd)"/>
</svg>

I know about Cross Origin Policy for local files in Google Chrome and this is not the issue, I tested on many other browsers.

if you need HTML to test SVG:

<!DOCTYPE html>
<html>
<head>
<style>
html, body, object {
  width: 100%;
  height: 100%;
}
</style>
<body>
<object type="image/svg+xml" data="main.svg"></object>
</body>
</html>

There is such question: I it possible to include external SVG defs But from those answers I can't understand how to solve the problem.

Community
  • 1
  • 1
Dzenly
  • 1,611
  • 12
  • 18
  • SVG doesn't work that way. `` is not the same as a C++ or java include statement, it's just a way to **render** some markup subset. – Robert Longson Jul 07 '15 at 06:29
  • Thank you. If so, I wish to know workarounds how to inject defs into SVG scope: 1) `marker-end="url(defs.svg#markerEnd)`, 2) injecting using JavaScript (my current solution and I don't like it). 3) What else ? – Dzenly Jul 07 '15 at 07:10
  • 2
    How did you end up doing it? I'm facing exactly the same need but for referencing filters. Thanks! – Miquel Adell Dec 17 '15 at 12:24
  • Unfortunately, I have not solved it. This had very low priority and we postponed it. Seems like this topic is not so interesting for others. – Dzenly Dec 18 '15 at 07:08

0 Answers0