生成带有虚线填充线的 SVG 矩形

【问题标题】：Generating an SVG rectangle with dashed fill lines生成带有虚线填充线的 SVG 矩形
【发布时间】：2017-10-18 10:48:48
【问题描述】：

我有一个用 dimpleJS 制作的矩形，需要用虚线而不是纯色填充框。这可能使用 svg、css 和/或 jquery 吗？矩形在下方。

<rect id="dimple-not-working-on-an-associate-s-degree-2008-not-working-on-an-associate-s-degree---" class="dimple-series-0 dimple-bar dimple-not-working-on-an-associate-s-degree dimple-2008 dimple-not-working-on-an-associate-s-degree dimple-custom-series-bar dimple-custom-format-1" x="183.5" y="128.4" width="18" height="141.6" opacity="0.8" style="fill: rgb(92, 186, 230); stroke: rgb(77, 156, 192);" fill="#5cbae6" stroke="rgb(77, 156, 192)"></rect>

【问题讨论】：

用图案填充它。在图案中画出你想要的任何虚线。
如何用图案填充它？那是svg还是css？非常感谢

标签： jquery css svg dimple.js

【解决方案1】：

正如 Robert 在 cmets 中提到的，您需要做的是使用 pattern 来填充矩形。步骤很简单：

在 SVG 中定义模式
在图案内，“画”出你想成为图案的任何东西。例如，您想要虚线，因此您将制作一条仅占据部分图案的线，这样当它重复时，它会看起来是虚线。
将属性patternUnits 设置为“userSpaceOnUse”，这样该模式将占据应用它的整个元素（就像背景重复一样）。
通过引用其 ID（例如 fill="url(#pattern-id)"）在 fill 属性中应用模式

在这里你可以看到一个演示：

<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <pattern id="lines" height="10" width="10" patternUnits="userSpaceOnUse">
      <line x1="0" y1="4" x2="5" y2="4" stroke-width="2" stroke="black"/>
    </pattern>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="url(#lines)" />
</svg>

【讨论】：