Question

我有一个包含在链接中的SVG。按默认＆＃39; SVG是一个带边框的圆圈，中间有一个三角形。当SVG盘旋时，形状变得坚固，但中间的三角形应该是透明的，显示背后的背景。

我已在下面的CodePen中创建了此效果，但我想知道是否有更好的方法。也许只使用1路径并改变悬停时路径的填充方式。

目前我在SVG中有3条路径。边框，三角形和带镂空三角形的圆形。您可以在下面看到SVG代码。

<a href="#" title="TITLE TEXT." class="btn-next-panel">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="icon-play">
    <path class="triangle" d="M19,35V15l16,10L19,35z"/>
    <path class="border" d="M25,0C11.2,0,0,11.2,0,25c0,13.8,11.2,25,25,25c13.8,0,25-11.2,25-25C50,11.2,38.8,0,25,0z M25,48C12.3,48,2,37.7,2,25 C2,12.3,12.3,2,25,2c12.7,0,23,10.3,23,23C48,37.7,37.7,48,25,48z"/>
    <path class="solid" d="M25,0C11.2,0,0,11.2,0,25s11.2,25,25,25s25-11.2,25-25S38.8,0,25,0z M19,35V15l16,10L19,35z" />
    </svg>
</a>

根据图标是否悬停而显示/隐藏每条路径。最初我以为我可以使用solid路径填充中间而不是外部形状，但我无法弄清楚如何做到这一点。

任何想法，还是我应该坚持我的想法？

SVG填充（填充＆＃39;空心＆＃39;区域）

0 个答案: