svg 对象模式，如何将其相乘答案

【问题标题】：svg object pattern, how to multiply itsvg 对象模式，如何将其相乘
【发布时间】：2016-03-05 05:42:30
【问题描述】：

所以我有一个 svg 图案，里面有 9 个点 (3x3)，背景是透明的。我把它作为一个对象带到了我的 html 中，因为我还必须改变点的颜色，我认为我不能只用 CSS 来做到这一点。

现在我需要重复这个对象，以便获得全屏的点？我将如何做到这一点？

【问题讨论】：

向我们展示您目前拥有的代码。

【解决方案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 将点相乘等等。

【讨论】：

我是个大菜鸟，所以很遗憾，除了 svgDoc.documentElement.childNodes 之外，我不知道我还需要什么

【解决方案2】：

我个人喜欢 SVG use 标签：

<svg class="icon">
  <use xlink:href="#svg-icon" />
</svg>

<svg id="defs" style="display:none">
  <defs>
    <symbol id="svg-icon" viewBox="0 0 13 13">
      <path d="M2,2 L11.1923882,11.1923882"></path>
      <path d="M11.1923882,2 L2,11.1923882"></path>
    </symbol>
  </defs>
</svg>

这个例子给你画了一个“X”。我可以通过定位 <svg> 来使用 CSS 设置样式：

.icon {
  fill: none;
  stroke-width: 2;
  stroke: red;
}

CSS-Tricks 的道具，我最初是从那里捡到这个的。

【讨论】：