希望在SVG元素上组合CSS填充颜色和SVG模式

Looking to combine CSS fill color and SVG pattern on an SVG element

本文关键字：SVG 填充 颜色 CSS 模式 组合 元素 希望      更新时间：2023-09-26

我想利用CSS的强大功能，将SVG元素的样式与两件事结合起来：填充颜色和纹理。我的纹理是使用有笔划但没有填充的SVG模式创建的。但是，即使图案没有填充，它仍然不允许CSS填充颜色通过笔划可见。

http://jsfiddle.net/9MTB6/

小提琴上的一段：

.texture_diagonal{
  fill: url(#texture_diagonal);
}
.cell_default{
  fill: #cccccc;
}
.cell_selected{
  stroke-width: 2px;
  stroke: #FF0000;
}
<pattern id="texture_diagonal" x="0" y="0" width="25%" height="25%" patternUnits="objectBoundingBox">
    <path d="M 0 0 l 32 32" style="stroke: black; fill: none;"/>
</pattern>
<rect x="98" y="115" 
width="32" height="32"
class="texture_diagonal cell_default cell_selected"
/>

在fiddle示例中，我展示了如何组合CSS类，以便第三行矩形可以同时具有"纹理"模式和填充颜色。为每个组合定义一个SVG模式太乏味了（例如：4个纹理X 3个填充颜色X 2个选定/未选定=需要24个模式！）。所以我的问题是：

我可以让模式表现得像一个透明的PNG吗？（所以图案的空白白色部分允许填充颜色显示在下面）？

-------编辑：

在我求助于Peter的解决方案之前，我的最后一个想法是：

<defs>
<pattern id="texture_diagonal" x="0" y="0" width="25%" height="25%" patternUnits="objectBoundingBox">
    <path d="M 8 0 l 0 32" style="stroke: black; fill: none;"/>
    <path class="myfill" d="M 0 0 l 0 32 l 32 0 l 0 -32 l -32 0"/>
</pattern>
</defs>
<rect x="20" y="20" width="32" height="32"
    class="texture_diagonal cell_connected"/>
<rect x="59" y="20" width="32" height="32"
    class="texture_diagonal cell_default"/>

当"myfill"路径位于不同的上下文中（cell_connected与cell_default）时，是否有任何方法可以使用选择器的CSS组合来针对该路径？

您不能完全按照自己的意愿进行操作，因为当您将填充设置为纹理时，会覆盖原始填充。我能看到的唯一方法是在上面写两个矩形，只对上面的一个进行纹理处理。

例如：

<rect x="20" y="115" width="32" height="32"
    style="stroke: black;"
    class="cell_default" />
<rect x="20" y="115" width="32" height="32"
    style="stroke: black;"
    class="texture_vertical" />

这并不理想，但它有效。

相关文章：