Javascript 希望在SVG元素上结合CSS填充颜色和SVG模式
我想使用令人敬畏的CSS将SVG元素的样式组合在两个方面:填充颜色和纹理。我的纹理是使用具有笔划但没有填充的SVG模式创建的。但是,即使模式没有填充,它仍然不允许CSS填充颜色通过笔划可见 小提琴的一段:Javascript 希望在SVG元素上结合CSS填充颜色和SVG模式,javascript,css,svg,Javascript,Css,Svg,我想使用令人敬畏的CSS将SVG元素的样式组合在两个方面:填充颜色和纹理。我的纹理是使用具有笔划但没有填充的SVG模式创建的。但是,即使模式没有填充,它仍然不允许CSS填充颜色通过笔划可见 小提琴的一段: .texture_diagonal{ fill: url(#texture_diagonal); } .cell_default{ fill: #cccccc; } .cell_selected{ stroke-width: 2px; stroke: #FF0000; } &
.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”路径处于不同的上下文中时,是否有任何方法可以使用CSS选择器组合来定位“myfill”路径,即“cell\u连接”与“cell\u默认值”?您不能完全按照自己的意愿进行操作,因为当您将填充设置为纹理时,会覆盖原始填充。我能看到的唯一方法是在两个矩形的顶部写上,只对顶部的一个进行纹理处理 例如:
<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" />
这不太理想,但很有效。谢谢@Peter。在我开始之前,我用最后一个想法/问题编辑了这个问题。我也认为像你这样的编辑应该是可能的,但我不知道怎么做。这并不是说这是不可能的。如果有人能想出一个办法,那会很有趣。但现在我只是用你的方法。如果它对其他人有帮助,它帮助我在纹理矩形上设置样式属性“指针事件:无”:您可以使用如下设置解决它:取消对“绿色”的注释,您将获得具有相同图案的其他颜色