我使用 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("#mask1");">
<!-- path elements -->
</g>
</svg>
最佳答案
你真的想要这个...
document.querySelector('#two_106').style.mask = "url(#mask1)"
单引号会变成 html 转义字符,但您无论如何都不需要它们。
关于javascript - 使用js动态添加SVG mask ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35639175/