希望在SVG元素上结合CSS填充颜色和SVG模式 [英] Looking to combine CSS fill color and SVG pattern on an SVG element
问题描述
我想使用CSS的awesomeness风格的SVG元素结合2件事情:填充颜色和纹理。我的纹理是使用具有笔画但没有填充的SVG图案创建的。但是,即使模式没有填充,它仍然不允许CSS填充颜色通过笔触可见。
I'd like to use the awesomeness of CSS to style SVG elements in combination of 2 things: fill color and texture. My textures are created using SVG patterns that have a stroke but no fill. But even though the pattern has no fill it still won't allow a CSS fill color to be visible through the strokes.
小提琴的一段:
.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"
/>
在这个例子中,我展示了如何组合CSS类,的矩形可以具有纹理图案和填充颜色。为每个组合定义一个SVG模式(例如:4个纹理X 3填充颜色x 2个选择/未选择= 24个模式需要!)过于繁琐。所以我的问题:
In the fiddle example, I show how I'd like to combine CSS classes so that the third row of rectangles can have both a 'texture' pattern and a fill color. It would be too tedious to define an SVG pattern for each combination (ex: 4 textures X 3 fill colors x 2 selected/unselected = 24 patterns needed!). So my question:
我可以让模式的行为像透明的PNG吗? (因此图案的空白部分允许在下面显示填充颜色)?
Can I make the pattern behave like a transparent PNG? (so the empty white portion of the pattern allows the fill color to show beneath)?
------- EDIT:
-------
在我诉诸Peter的解决方案之前, / p>
My last idea before I resort to Peter's solution:
<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组合的选择器来定位'myfill'路径,当它在不同的上下文(cell_connected和cell_default)?
Is there any way to use CSS combination of selectors to target the 'myfill' path when it's in different contexts (cell_connected versus cell_default)?
推荐答案
你不能做你想要的,因为当你设置填充纹理您覆盖原始填充。
You can't do quite what you want because when you set the fill to the texture you overwrite the original fill. The only way I can see around this is to write two rects on top of each other and only texture the top one.
例如:
<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" />
这不太理想,但工作正常。
It's not ideal, but it works.
这篇关于希望在SVG元素上结合CSS填充颜色和SVG模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!