相关疑难解决方法(0)

剪辑路径在SVG精灵中不起作用

(http://codepen.io/RwwL/pen/xbNLJp上的实例)

我在使用该<symbol>元素的应用程序中包含SVG (请参阅https://css-tricks.com/svg-symbol-good-choice-icons/以获取有关原因的详细信息),以及某些图标 - 包括clip-path-当我在带有<use>元素的页面中包含他们的图标时不进行渲染.

<svg style="display: none">
  <symbol id="icon-pin" viewBox="0 0 24 24" enable-background="new 0 0 24 24">
    <path fill="none" stroke="#2F3137" stroke-width="2" stroke-miterlimit="10" d="M12 2C8.3 2 5.3 5 5.3 8.7c0 1.2.3 2.3.9 3.3l5.4 9.9c.1.1.2.2.4.2.1 0 .3-.1.4-.2l5.4-9.9c.5-.9.9-2.1.9-3.3C18.7 5 15.7 2 12 2zm0 0" />
    <clipPath id="pin-clip">
        <path d="M12 11.2c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm0 0" />
    </clipPath>
    <path clip-path="url(#pin-clip)" fill="#2F3137" d="M4.5 1.2h15v15h-15z" />
  </symbol>
</svg>
</div>

<h2>Normal …
Run Code Online (Sandbox Code Playgroud)

svg

4
推荐指数
1
解决办法
1663
查看次数

标签 统计

svg ×1