【发布时间】：2017-03-07 04:23:58
【问题描述】：
我正在尝试使用剪辑路径将 svg 用作背景图像，因此我可以动态更改背景颜色。
这是一个复选框，其中的勾号是 svg。
我使用的是 base64 图像的 css 掩码属性，但这不是跨浏览器兼容的。这似乎在 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>
【问题讨论】：
-
你能解释一下你到底想要达到什么目标吗？为什么要尝试使用 SVG clipPath 剪辑
<div>？为什么不直接使用 SVG？面具 SVG 的目的是什么？你的安排似乎不必要地复杂。 -
在您的真实环境中，您的 CSS 是一个单独的文件吗？如果是这样，该 CSS 文件中没有带有 id 为 checkBox 的元素（即在您的 SVG 文件中）。 #id 是文件的本地文件，尽管在未来的版本中会有所改变。
-
@RobertLongson - 看来你已经破解了。 css 在一个单独的文件中，因为我将它移到了 html 的头部，所以它已经工作了。把它作为一个答案，我会接受它。
-
@PaulLeBeau - 正在创建一个表单构建器，用户可以动态更改复选框的颜色。所以会有一个复选框，一个 div 覆盖在顶部，上面有一个 svg，用户可以根据需要更改颜色