Question

我正在尝试使用一些脚本编写SVG代码。我遇到的一个问题是更改了Safari中xlink:href元素的<use /> - 设置此属性后它变为黑色。它在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>

请帮帮我，告诉我有什么问题。感谢。

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

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

有什么想法吗？

Answer 1

只是一个建议（远射）。尝试在你的通话中使用'href'，而不是'xlink：href'。即：

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

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

Answer 2

尝试使用SVGUseElement的api。

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

尝试使用SVGSVGElement的forceRedraw方法。

document.documentElement.forceRedraw();

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

2 个答案: