我正在尝试使用剪辑路径将svg用作背景图像,因此我可以动态更改背景颜色。
这是一个复选框,其中tick是svg。
我正在使用base64图像使用css mask属性,但这并不是跨浏览器兼容的。这似乎不适用于Firefox
我有以下显示我的代码的codepen。我将在下面解释。
SVG:
<svg version="1.1" height="0px" width="0px" id="Check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<clipPath id="checkBox">
<path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951
c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445
c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z" />
</clipPath>
</svg>
CSS:
div.svgCheckDiv {
clip-path: url('#checkBox');
}
这在codepen中运行良好,但这似乎不适用于我的应用程序。下面的屏幕截图显示无法找到图像。在我的HTML中,我已将svg添加到隐藏div中的正文中。
任何人都可以提供一些帮助,说明为什么不加载?
如果需要,我可以提供更多代码示例和信息。感谢。
编辑 - 完整HTML
<html>
<head>
<style>
div.svgCheckDiv {
-webkit-mask: url('#checkBox');
mask: url('#checkBox');
clip-path: url('#checkBox');
}
</style>
</head>
<body class="tileset vertical">
<div class="svg_holder">
<svg version="1.1" height="20px" width="20px" id="Check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<clipPath id="checkBox">
<path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951
c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445
c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z" />
</clipPath>
</svg>
</div>
<table style="width: 100%; border:none;" align="left">
<tbody>
<tr>
<td class="checkbox_td" style="padding: 2px 0px 6px 0px;width:27px;">
<input class="canvas-checkbox-selected" name="Checkbox Group" style="box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);-moz-box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);-webkit-box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);border:2px solid #809191;background: #52acaf;float: left; width: 27px; height: 27px" type="checkbox">
<div class="svgCheckDiv" style="background:#ff0000;height:27px;width:27px;"></div>
</td>
<td class="checkbox_label" style="padding: 2px 8px 6px 6px; height: 18px; line-height: 18px; font-size: 18px; text-decoration: none;">Item One</td>
</tr>
<tr>
<td class="checkbox_td" style="padding: 2px 0px 6px 0px;width:27px;">
<input class="canvas-checkbox" name="Checkbox Group" style="box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);-moz-box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);-webkit-box-shadow:inset 2px 2px 0px 0px rgba(38, 38, 38, 0.2);border:2px solid #809191;background: #FFFFFF;float: left; width: 27px; height: 27px" type="checkbox">
<div class="svgCheckDiv-hidden" style="background:#ff0000;height:27px;width:27px;"></div>
</td>
<td class="checkbox_label" style="padding: 2px 8px 6px 6px; height: 18px; line-height: 18px; font-size: 18px; text-decoration: none;">uhjgjghj</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 0 :(得分:1)
目前,以#开头的网址指向同一个文件。即如果你在CSS文件中写#xxx,你需要在CSS文件中拥有一个id为xxx的元素。
最近相关规格发生了变化,我认为Firefox会在某些时候改变,假设#xxx会引用父文档中的资源。
与此同时,您可以将CSS放在它引用的文件中,也可以将文件路径添加到#
答案 1 :(得分:0)
不要将svg放入 display:none div。因为那时svg属性不会执行。
<div style="display: none;">
<!-- SVG will not work in this div-->
</div>
<div style="visibility: hidden;">
<!-- SVG will work on this div -->
</div>
div.svgCheckDiv {
clip-path: url('#checkBox');
}
&#13;
<div class="svgCheckDiv" style="height: 20px;width: 20px;background: red;"></div>
<svg version="1.1" height="0px" width="0px" id="Check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<clipPath id="checkBox">
<path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951
c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445
c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z"/>
</clipPath>
</svg>
&#13;
我认为你在svg中缺少这一部分。请放入你的svg。之后,这将有效。
<clipPath id="checkBox">
<path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951
c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445
c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z"/>
</clipPath>
答案 2 :(得分:0)
您可以尝试在Firefox中输入网址about:config,然后将密钥layout.css.clip-path-shapes.enabled
设置为true
。这可能会解决您的问题。
答案 3 :(得分:0)
我的html中有一些变化,并为交叉浏览器兼容性添加了一些css属性,如前缀。没有任何问题,FireFox工作正常,请将此代码段检查到您的浏览器中。
.table{
border: none;
border-collapse: collapse;
width: 100%;
}
.table tr td label{
display: block;
height: 35px;
line-height: 30px;
border-bottom: 1px solid #ddd;
}
.table tr td label:hover{
background: #f9f9f9;
cursor: pointer;
}
.canvas-checkbox{
position: absolute;
opacity: 0;
}
div.svgCheckDiv {
background:#ff0000;
height:27px;
width:27px;
display: none;
/*call svg by id*/
-webkit-clip-path: url('#checkBox'); /*For Chrome and Safari*/
-moz-clip-path: url('#checkBox'); /*for Firefox*/
-ms-clip-path: url('#checkBox'); /*for IE*/
-o-clip-path: url('#checkBox'); /*for Opera*/
clip-path: url('#checkBox');
}
.canvas-checkbox:checked ~ div.svgCheckDiv{
display: block;
}
<table class="table">
<tbody>
<tr>
<td width="27"> </td>
<td> </td>
</tr>
<tr>
<td>
<input class="canvas-checkbox" name="Checkbox Group" type="checkbox" id="check1" checked>
<div class="svgCheckDiv"></div>
</td>
<td><label for="check1">Item 1</label></td>
</tr>
<tr>
<td>
<input class="canvas-checkbox" name="Checkbox Group" type="checkbox" id="check2">
<div class="svgCheckDiv"></div>
</td>
<td><label for="check2">Item 2</label></td>
</tr>
<tr>
<td>
<input class="canvas-checkbox" name="Checkbox Group" type="checkbox" id="check3">
<div class="svgCheckDiv"></div>
</td>
<td><label for="check3">Item 3</label></td>
</tr>
</tbody>
</table>
<div class="svg_holder">
<svg version="1.1" height="20px" width="20px" id="Check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<clipPath id="checkBox">
<path d="M8.294,16.998c-0.435,0-0.847-0.203-1.111-0.553L3.61,11.724c-0.465-0.613-0.344-1.486,0.27-1.951 c0.615-0.467,1.488-0.344,1.953,0.27l2.351,3.104l5.911-9.492c0.407-0.652,1.267-0.852,1.921-0.445 c0.653,0.406,0.854,1.266,0.446,1.92L9.478,16.34c-0.242,0.391-0.661,0.635-1.12,0.656C8.336,16.998,8.316,16.998,8.294,16.998z" />
</clipPath>
</svg>
</div>