javascript - 更新xlink :href doesn't read CSS of source element in Safari

Question

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

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

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

下面我粘贴代码:

<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>

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

<小时/>

经过多次试验，我找到了原因 - 据我所知，它不依赖于 namespace 、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 脚本。