SVG - 剪辑路径仅在相同的 <svg> 标签中定义时有效答案

【问题标题】：SVG - Clip-path only works when defined within same <svg> tagsSVG - 剪辑路径仅在相同的 <svg> 标签中定义时有效
【发布时间】：2017-05-21 21:56:56
【问题描述】：

我有一个我在外部定义的 SVG 星形，然后使用 use 将其包含在 DOM 中：

<svg>
  <defs>
    <symbol id="Star" viewBox="0 0 256 244">
      <polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
    </symbol>
  </defs>
</svg>

<svg class="icon star" viewBox="0 0 256 244">
  <title>Add Favorite</title>
  <use xlink:href="#Star"></use>
</svg>

在这种情况下，它只是简单地定义在正文的顶部，但实际上将是一个外部文件。

我想做的是让星星看起来像是从外面填充的。为此，我添加了一个 stroke-width 过渡，并使用相同的路径剪辑 SVG：

*HTML*

<svg class="icon star" viewBox="0 0 256 244">
  <defs>
    <clipPath id="clip" viewBox="0 0 256 244">
      <polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
    </clipPath>
  </defs>

  <title>Add Favorite</title>
  <use xlink:href="#Star" clip-path="url(#clip)"></use>
</svg>


*CSS*

.icon {
  margin: 50px;
  width: 50px;
  height: 50px;
}
.star {
  fill: #0F0;
  stroke: #F00;
  stroke-width: 1px;
  transition: stroke-width 200ms linear;
}
.star:hover {
  stroke-width: 50%;
}

这是一种享受！这是working fiddle

但是，当我尝试将 clipPath 定义移到顶部时...

<svg style="display: none;">
  <defs>
    <clipPath id="clip" viewBox="0 0 256 244">
      <polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
    </clipPath>
  </defs>

  <defs>
    <symbol id="Star" viewBox="0 0 256 244" clip-path="url(#clip)">
      <polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
    </symbol>
  </defs>
</svg>

<svg class="icon star" viewBox="0 0 256 244">
  <title>Add Favorite</title>
  <use xlink:href="#Star"></use>
</svg>

...它不再起作用了。这是not working fiddle。

如果我在下面的use 中包含clip-path="url(#clip)"，则没有任何变化。结果相同。同样，在 CSS 中添加它：

.star {
  ...
  clip-path: url(#clip);
}

那么，什么给了？两者有何不同？如果我必须使用第一种方法，那就这样吧。但理想情况下，我希望尽可能保持 DOM 干净，并将所有 SVG 定义分开 - 或至少在顶部一起。

【问题讨论】：

好吧，这似乎成功了！但是，我该如何处理无样式的 SVG 定义留下的巨大缺口呢？
是的，你打败了我。我刚刚运行它并回来评论它。赢家赢家。 Thnx，罗伯特。

标签： html css svg

【解决方案1】：

display: none 在涉及 SVG 内容时最好避免。它会关闭 CSS，并且 clip-path 之类的东西是 CSS 映射属性，因此它们不再起作用。

使用 width="0" 和 height="0" 代替（或者如果需要，可以通过 CSS 设置外部 SVG 宽度和高度）。

【讨论】：

【解决方案2】：

正如 Robert Longson 所建议的，最好避免使用 display: none。

将其替换为 width: 0; height: 0; 解决了该问题。

https://jsfiddle.net/uq37cxep/12/

【讨论】：