Question

嘿，我在使用简单的svg clipPath时遇到了麻烦...

我在div中有一个简单的img

<div class="image">
  <img src="xxxxxxx" class="clipped">
</div>

有一个svg clipPath，我有一个能自动生成矩形宽度的javascript。

<svg width="0" height="0">
  <defs>
    <clipPath id="clipPath" clipPathUnits="objectBoundingBox">
      <rect x="0" y="0.1" width="0" height="0.85" />
    </clipPath>
  </defs>
</svg>

，其中定义了多个rect元素。如果我将元素硬编码到html中（5个元素的示例），一切都可以正常工作，但是我编写了一个函数来选择rect的数量，因此我无法弄清楚出了什么问题。

它生成具有正确属性（x，y，宽度，高度）的rect，并将它们插入DOM。当我打开检查器时，我可以在DOM中看到它们，但是它将宽度和高度显示为自动，因此即使设置了width和height attr，也没有任何显示。这是javascript代码段。

function createRects(num) {
    let frag = document.createDocumentFragment();
    for(let i = 0; i < num; i++) {
    let temp = document.createElement("rect"),
        yVal = rnd(0, 0.18);
    temp.setAttribute("x", 0);
    temp.setAttribute("y", yVal);
    temp.setAttribute("width", 0);
    temp.setAttribute("height", (rnd(0.80, 1) - yVal));
    frag.appendChild(temp);
  };
  return frag;
}
const clipPathNode = document.querySelector("#clipPath");
var fragment = createRects(8);
clipPathNode.appendChild(fragment);

因此，当硬编码clipPath的rect数时，一切都可以正常工作，但是尝试动态生成它们时，即使将它们放入DOM也会出问题。

任何帮助将不胜感激。这是指向代码笔的链接。 https://codepen.io/eth0s/pen/ejdyLJ

Answer 1

这是我曾经发现的一件奇怪的事情，但是我认为您需要使用createElementNS来创建svg元素。尝试使用它代替document.createElement('rect')，看看它是否具有所需的效果。

document.createElementNS('http://www.w3.org/2000/svg', "rect")

动态生成的svg无法正确呈现

1 个答案: