javascript - svg 对象模式，如何将它相乘

Question

所以我有一个 svg 图案，里面有 9 个点 (3x3)，背景是透明的。我已将其作为对象引入到我的 html 中，因为我还必须更改点的颜色，我认为仅使用 CSS 无法做到这一点。

现在我需要重复这个对象，这样我才会有全屏的点？我将如何做到这一点？

Answer 1

因此，可以使用 CSS 更改点的颜色。例如:

<object id="object" type="image/svg+xml" data="/paht/to/mysvg.svg"></object>

var a = document.getElementById("object");
        var svgDoc = a.contentDocument;
        var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
        styleElement.textContent = "* { fill: #000 }";
        svgDoc.documentElement.appendChild(styleElement);

并且您可以访问根目录(svgDoc.documentElement) 中的每个子元素(dots) 并根据需要对其进行操作，例如乘以点等通过 svgDoc.documentElement.childNodes。