如何在通过导入的<use>元素中引用父文档中设置的值

Question

对于一个玩具项目，我正在使用随机的旗帜设计和随机的旗帜颜色。由于路径是一大块丑陋的导出SVG，所以我希望将所有这些形状放入一个SVG库中。这样，生成器只需要创建一个小的、易于阅读的存根来定义颜色，并从库中导入设计。

一对演示文件。

flaglib.svg:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="300px" viewBox="0 0 500 300" xml:space="preserve">
<g id="Design1">
<rect width="500px" height="300px" fill="url(#BACKGROUND_PRIMARY)" />
<circle cx="250px" cy="150px" r="90px" fill="url(#FOREGROUND_PRIMARY)" />
</g>
...
</svg>

flagstub.svg:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="2.0" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="500px" height="500px" viewBox="0 0 500 500" xml:space="preserve">
<defs>
<linearGradient id="BACKGROUND_PRIMARY"><stop offset="50%" stop-color="#F00" /></linearGradient>
<linearGradient id="FOREGROUND_PRIMARY"><stop offset="50%" stop-color="#FF0" /></linearGradient>
</defs>
<use href="flaglib.svg#Design1"></use>
</svg>

ID为#BACKGROUND_PRIMARY的标签只定义一次，所以当它在渲染前导入缺失的文本时，它不应该从其他任何地方为它提取值。然而，它们忽略了设置的值。

那么:从库文件导入的SVG元素如何使用存根文件中定义的颜色?

Answer 1

您使用什么浏览器进行测试?最后我检查了一下，只有Firefox正确地支持外部使用引用。

关于这个主题的更多讨论，请参阅这个问题。