更新 xlink:href 不会读取 Safari 中源元素的 CSS

Question

我正在尝试使用一些脚本编写 SVG。我遇到的一个问题是在 Safari 中将 xlink:href 更改为 <use /> 元素 - 设置此属性后它会变黑。它在 Chrome 中运行良好。

测试页面位于http://test.ukleja.info/xlink-test.svg

单击灰色圆圈（即<use /> 元素）应更改xlink:href 属性并链接到<defs> 中定义的另一个<symbol> 元素并将其变为蓝色。

下面我粘贴代码：

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <script>
        function newUse () {
            document.getElementById('myUse').setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#newUse')
        }
    </script>
    <style type="text/css">
        .existing {
            stroke: #666;
            stroke-width: 16;
            fill: #ccc;
        }
        .new {
            stroke: #3399ff;
            stroke-width: 16;
            fill: #99ccff;
        }
    </style>
    <defs>
        <symbol id="existingUse" style="overflow:visible">
            <circle cx="48" cy="48" r="48" class="existing" />
        </symbol>
        <symbol id="newUse" style="overflow:visible">
            <circle cx="48" cy="48" r="48" class="new" />
        </symbol>
    </defs>
    <use id="myUse" xlink:href="#existingUse" x="64" y="64" onclick="newUse()" />
</svg>

请帮助我，告诉我出了什么问题。谢谢。

---

经过多次试验，我找到了原因——据我所知，它不依赖于命名空间、xlink 或类似的东西。因此我稍微改变了话题。

Safari 不读取symbol 元素所引用的use 元素的类/样式。直接在symbol 元素中更改内联样式可以解决问题。然而，这仍然不是 Safari 的理想行为。

有什么想法吗？

Answer 1

只是一个建议（远射）。尝试在通话中仅使用“href”，而不是“xlink:href”。即：

setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#newUse')

我无法自己测试它，因为我使用的是适用于 Windows 的 Safari 5.1.7，而且它似乎根本不支持 SVG 脚本。

Answer 2

尝试使用 SVGUseElement 的 api。

document.getElementById('myUse').href.baseVal = '#newUse';

试试 SVGSVGElement 的 forceRedraw 方法。

document.documentElement.forceRedraw();