3

我正在使用 jquery 和 two.js 的组合来创建动画 svg。我遇到了一个奇怪的错误，即标记被错误地添加并且没有被浏览器呈现。

真正奇怪的部分是，如果我在 chrome 中打开检查器并在掩码元素上选择“编辑为 html”并向掩码添加任何额外的元素，整个事情就会按预期呈现。

我复制/粘贴了 html 并发现了这一点：

style="mask: url("#mask1");"

我正在使用 vanilla js 来设置样式：

document.querySelector('#two_106').style.mask = "url('#mask1')"

但无济于事。

这是标记的重要部分：

<svg version="1.1" width="1339" height="805" style="overflow: hidden; display: block; top: 0px; left: 0px; right: 0px; bottom: 0px; position: fixed;">

    <defs>
        <mask id="mask1" x="0" y="0" width="1000" height="1000">
            <g id="two_2" transform="matrix(1 0 0 1 0 0)" opacity="1">
                <!-- path elements -->
            </g>
        </mask>
    </defs>

    <g id="two_106" transform="matrix(1 0 0 1 0 0)" opacity="1" style="mask: url(&quot;#mask1&quot;);"> 
<!-- path elements -->
    </g>

</svg>
4

1 回答 1

1

你其实想要这个...

document.querySelector('#two_106').style.mask = "url(#mask1)"

单引号会变成 html 转义字符，但无论如何您都不需要它们。

于 2016-02-25T22:07:53.170 回答