使用 JavaScript 的 SVG 剪辑

SVG clipping using javascript

本文关键字：剪辑 SVG JavaScript 使用      更新时间：2023-09-26

我们尝试使用 javascript 将 clippath 用于折线。我们尝试编写一个示例 HTML 代码，效果很好：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="parent">
    <clippath id="cut-off-bottom">
        <rect x="0" y="0" width="200" height="100" />
    </clippath>
    <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

这绝对没问题。

但是当我们尝试使用 javascript 生成相同的代码时，它不起作用：

_svgNS = 'http://www.w3.org/2000/svg';
parent = document.getElementById('parent');
circle = document.createElementNS(_svgNS, 'circle');
circle.setAttributeNS(null, 'cx', '100');
circle.setAttributeNS(null, 'cy', '100');
circle.setAttributeNS(null, 'r', '100');
clippath = document.createElementNS(_svgNS, 'clippath');
clippath.setAttributeNS(null, 'id', 'clip');
r = document.createElementNS(_svgNS, 'rect');
r.setAttributeNS(null, 'x', '0');
r.setAttributeNS(null, 'y', '0');
r.setAttributeNS(null, 'width', '200');
r.setAttributeNS(null, 'height', '100');

clippath.appendChild(r);
circle.setAttributeNS(_svgNS, 'clip-path', 'url(#clip)');
parent.appendChild(clippath);
parent.appendChild(circle);

任何人都可以帮助我们找到上述代码的问题......

提前谢谢。

经过一段时间的摆弄，事实证明 SVG 非常区分大小写，clippath元素需要是一个clipPath元素。

请参阅工作小提琴：http://jsfiddle.net/F4mq9/2/

然而，非常奇怪的是静态样本有效。

您将<clippath>的id设置为 clip ，但随后将clip-path="url(#clippath)设置为 。您需要匹配您设置的id属性。

演示：http://jsfiddle.net/uMe4s/7/

我已经对您的一些代码进行了修改(在创建元素后立即附加元素，而不是在末尾附加(。这对解决方案没有影响。

老问题，但是批准的修复中未提及该修复程序。它不起作用的原因是 clippath 属性上的命名空间。就像在 jsfiddle 中一样，命名空间 url 应该设置为 null 。

相关文章：