javascript - 希望在 SVG 元素上结合 CSS 填充颜色和 SVG 图案

Question

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

http://jsfiddle.net/9MTB6/

fiddle 的一段:

.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"/>

有什么方法可以使用 CSS 选择器组合来定位处于不同上下文(cell_connected 与 cell_default)中的“myfill”路径？

Answer 1

您无法完全按照自己的意愿行事，因为当您将填充设置为纹理时，您会覆盖原始填充。我能看到的解决这个问题的唯一方法是将两个矩形写在彼此的顶部，并且只对顶部的纹理进行纹理处理。

例如:

<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" />

这并不理想，但它确实有效。