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

时间:2017-10-17 20:55:46

标签: jquery css css3 svg dimple.js

我有一个用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>

1 个答案:

答案 0 :(得分:3)

正如罗伯特在评论中提到的,你需要做的是使用pattern来填充矩形。步骤很简单:

  • 在SVG中定义模式
  • 在模式中,&#34;绘制&#34;无论你想成为什么模式。例如,你想要虚线,所以你会做一条只占据模式一部分的线,所以当它重复时它会看起来是虚线。
  • 将属性patternUnits设置为&#34; userSpaceOnUse&#34;因此模式将占据应用它的整个元素(就像使用背景重复一样)。
  • 通过引用其ID(例如fill
  • fill="url(#pattern-id)"属性中应用该模式

在这里你可以看到一个演示工作:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;