CSS/SVG剪切路径在Firefox中无法工作。

Question

CSS/SVG剪切路径在Firefox中无法工作。

cssfirefoxsvgclip

4

我正在尝试使用 clip path 将 svg 作为背景图像，这样我就可以动态更改背景色。

这是一个复选框，其中勾号将是 svg。

我曾经使用 css mask 属性使用 base64 图像，但这在跨浏览器兼容方面存在问题。在 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中的body内。

有人能解释一下为什么这个没有加载吗？

如果需要，我可以提供更多的代码示例和信息。谢谢。

编辑 - 完整的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>

- Pooshonk

你能解释一下你想要实现什么吗？为什么要使用SVG clipPath来裁剪<div>？为什么不直接使用SVG呢？而且，遮罩SVG的目的是什么？你的布局似乎过于复杂了。 - Paul LeBeau

在您的实际环境中，您的CSS是一个单独的文件吗？如果是这样，那么该CSS文件中没有一个id为checkBox的元素（该元素在您的SVG文件中）。#id仅适用于文件内部，尽管这将在未来版本中更改。 - Robert Longson

@RobertLongson - 看起来你已经解决了。CSS文件是分离的，自从我把它移动到HTML的头部后，它就起作用了。将其作为答案发送，我会接受它。 - Pooshonk

@PaulLeBeau - 我们正在创建一个表单构建器，用户可以随时更改复选框的颜色。因此，将有一个复选框和一个叠加在其上的 div，其中包含用户可以根据需要更改颜色的 svg 图像。 - Pooshonk

4个回答

1

你可以在Firefox中尝试输入网址about:config，并将键layout.css.clip-path-shapes.enabled设置为true。这可能会解决你的问题。

- Jin

不幸的是，它没有这个功能。即使有，由于一些用户可能没有启用此功能，它也无法正常工作。 - Pooshonk

-1

我对你的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">&nbsp;</td>
      <td>&nbsp;</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>

- Raeesh Alam

没有所谓的“-moz-clip-path”，也从来没有过。我怀疑大多数其他前缀也是无用的。 - Robert Longson

好的，你的代码现在是否正常工作？你从我的代码中得到了什么想法吗？@Pooshonk - Raeesh Alam

这不是因为这个答案。@RobertLongson在我的问题上放了一个带有正确答案的评论。 - Pooshonk

感谢@RobertLongson的好建议 :) - Raeesh Alam

-1

不要将 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');
}

<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>

我认为你在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>

- Raeesh Alam

抱歉，代码已经存在，只是我没有正确格式化它。问题已经被编辑以反映我的CodePen。 - Pooshonk

不要把你的SVG代码放到隐藏的div中。我希望@Pooshonk能够解决这个问题。 - Raeesh Alam

不幸的是，这仍然不起作用。问题似乎出在Firefox无法在我的HTML中找到图片本身。控制台一直显示图像无法加载。 - Pooshonk

你能上传包含CSS和SVG的整个HTML文件吗？这样我就可以解决你在Firefox上遇到的问题了。@Pooshonk - Raeesh Alam

我已经添加了我的HTML。 - Pooshonk

谢谢@Pooshonk，我已经添加了新的答案，并使用您的HTML，请检查我的另一个答案，其中包含我的一些修改，现在在每个现代浏览器上都可以正常工作，而且在Firefox中也没有任何问题。 - Raeesh Alam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

目前以#开头的URL指向同一文件。也就是说，如果您在CSS文件中写入#xxx，则需要在该CSS文件本身中具有id为xxx的元素。

相关规范最近已更改，我认为Firefox在某个时候会更改，假定#xxx将引用父文档中的资源。

与此同时，您可以将CSS放在它所引用的文件中，或者在#之前添加文件路径。