Question

我有多个填充不同颜色的矩形。其中一些我需要用虚线背景填充它们并仍保留原始填充颜色。

类似的东西：

<rect class="one" y="0" x="0" width="100" height="100" />
<rect class="one dashed" y="0" x="110" width="100" height="100" />
<rect class="two" y="110" x="0" width="100" height="100" />

我试图用模式定义完成它，但我只是得到一个白色背景。看到这个小提琴：http://jsfiddle.net/AyKarsi/eLbvem92/

无视我的上述尝试，实现这一目标的最佳方法是什么？

Answer 1

正如其他人所说，你不能对一个元素应用两种不同的填充。您需要覆盖两个元素。

<rect class="one" y="0" x="110" width="100" height="100" />
<rect class="dashed" y="0" x="110" width="100" height="100" />

此外，您的模式定义错误，这就是它不显示的原因。以下是更正后的版本：

<pattern id="dashedBackground"  width="6" height="48" patternUnits="userSpaceOnUse">
    <image xlink:href="http://app.absence.io/assets/images/absence_pattern.png"
           x="0" y="0" width="6" height="50" />
</pattern>

我不得不剪掉你的图像，因为它在50的高度不能正确重复。但它确实在48。我认为这就是你想要的。

Here is a fully working demo.

<强>更新

实际上，通过使用过滤器，有一种方法可以做到这一点，没有多个叠加层。

<svg width="400" height="410">
    <defs>
        <filter id="dashedBackground" x="0" y="0" width="100%" height="100%">
            <feImage xlink:href="http://app.absence.io/assets/images/absence_pattern.png" x="0" y="0" width="6" height="48" preserveAspectRatio="xMinYMin slice"/>
            <feTile x="0" y="0" width="100%" height="100%"/>
            <feComposite in2="SourceAlpha" operator="in"/>
            <feMerge>
                <feMergeNode in="SourceGraphic"/>
                <feMergeNode/>
            </feMerge>
        </filter>               
    </defs>

    <rect width="100" height="100" transform="translate(110,0)"
          fill="green" filter="url(#dashedBackground)"/>
</svg>

但有一个缺点是，由于feTile的工作原理，你必须使用变换来定位形状。

Demo here

Answer 2

我已经能够通过覆盖第二个矩形来实现所需的效果：

<rect class="one" y="0" x="110" width="100" height="100" />
<rect class="dashed" y="0" x="150" width="100" height="100" />

请参阅此小提琴，了解完整的工作示例： http://jsfiddle.net/AyKarsi/t8gzep39/

带有虚线背景的SVG矩形

2 个答案: