我想利用 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"
/>
在小提琴示例中,我展示了如何组合 CSS 类,以便第三行矩形可以同时具有“纹理”图案和填充颜色。为每个组合定义一个 SVG 图案太乏味了(例如:4 个纹理 X 3 种填充颜色 x 2 个选定/未选定 = 需要 24 个图案!)。所以我的问题是:
我可以让图案表现得像透明 PNG 吗? (因此图案的空白白色部分允许填充颜色显示在下面)?
- - - - 编辑:
在采用彼得的解决方案之前我的最后一个想法是:
<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 组合来定位“myfill”路径?
您无法完全按照您想要的方式进行,因为当您将填充设置为纹理时,您会覆盖原始填充。我能看到的唯一方法是在彼此之上写两个矩形,并且只对顶部的矩形进行纹理处理。
例如:
<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" />
这并不理想,但它有效。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)