Question

我有一个工作的main.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>
    <line x1="0" y1="0" x2="200" y2="200" stroke="black" marker-end="url(#markerEnd)"/>
</svg>

现在我希望将defs移到一个单独的文件中。

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>

我可以使用：marker-end="url(defs.svg#markerEnd)"，但我希望将defs.svg中的id注入main.svg，仍然使用marker-end="url(#markerEnd)"。

如何更改main.svg以使用外部defs.svg中的标记识别器？

这样的main.svg不会绘制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>

我了解Google Chrome中本地文件的跨域政策，这不是问题，我在许多其他浏览器上进行了测试。

如果您需要HTML来测试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>

有这样的问题： I it possible to include external SVG defs 但从这些答案中我无法理解如何解决问题。

如何在SVG中使用外部defs将识别器注入到包含器的范围内

0 个答案: