相关疑难解决方法(0)

实现SVG精灵时,<svg>会创建一个元素,并通过该<use>元素引用svg元素.<svg>然后使用隐藏包含元素style="display: none;"

clip-Path属性不会渲染,但路径会渲染.这使我的路径看起来与我想要的路径不同.

如何使用<use xlink:href="#"/>带剪辑路径引用元素的svg ？

我使用grunt-svg-store来创建我的svg sprite,但是已经简化了Q&A格式的这个例子https://css-tricks.com/svg-sprites-use-better-icon-fonts/

<svg id="svg-test" style="display: none;">
  <clipPath id="my-clip-1">
    <circle id="circle-1" cx="50" cy="50" r="50" />
  </clipPath>
  <path id="svg-test-reference" clip-path="url(#my-clip-1)" d="M10-39.288h80v80H10z" />
</svg>

<!-- Reference SVG <path> by ID with Use -->

<svg class="svg-item" viewBox="0 0 100 100">
  <use xlink:href="#svg-test-reference" />
</svg>

Codepen.io上的实例