使用材质图标 SVG 的外部和内部路径

Question

我想在这里使用来自 Material Icon 的 SVG 图像： https://material.io/icons/#ic_favorite 和这里 https://material.io/icons/#ic_favorite_border

我的目标是将两条 SVG 路径结合起来，以便在开始时显示心形边框，在悬停时显示心形。

我有另一个类似的想法，使用不同的图标，效果很好。我使用 path-outher 和 path-inner 以及一些简单的 CSS：

<svg height="24px" viewbox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path class="path-outer" d="M17.2385534,1 C15.2451845,1 13.3287082,1.85652572 11.9996333,3.32137937 C10.6710451,1.85652572 8.75505551,1 6.76265989,1 C3.03385303,1 0,4.03190638 0,7.75973991 C0,9.22946018 0.462329224,10.6261811 1.34172807,11.803904 L10.723118,22.8998053 C11.0112221,23.240469 11.4326717,23.4400005 11.8813744,23.4400005 L11.887701,23.4400005 C12.3300771,23.4400005 12.7500667,23.2502022 13.0396308,22.9144052 L22.4258873,12.100768 C23.442525,10.8841121 24.0026733,9.34625914 24.0026733,7.75973991 C24.0026733,4.03190638 20.9683336,1 17.2385534,1 L17.2385534,1 Z"></path>
    <path class="path-inner" d="M21.6851872,11.468107 L12.3047706,22.2768775 C12.2001382,22.3985431 12.0478129,22.4666759 11.887701,22.4666759 L11.887701,22.9533382 L11.884781,22.4666759 C11.7232091,22.4666759 11.5703972,22.3936765 11.4662514,22.2720109 L2.11649452,11.2150425 C1.3684945,10.2125181 0.973324682,9.01532875 0.973324682,7.75973991 C0.973324682,4.56723496 3.57064159,1.97332468 6.76265989,1.97332468 C8.65577639,1.97332468 10.4690803,2.86878339 11.6122501,4.37257002 C11.7042293,4.49423561 11.847308,4.56723496 11.9996333,4.56723496 C12.151472,4.56723496 12.2945507,4.49423561 12.3865299,4.37257002 C13.5306731,2.86878339 15.3444636,1.97332468 17.2385534,1.97332468 C20.4315451,1.97332468 23.0293486,4.56723496 23.0293486,7.75973991 C23.0293486,9.11752784 22.5499862,10.4363828 21.6851872,11.468107 L21.6851872,11.468107 Z"></path>
  </g>
</svg>

不，我尝试使用与 Material Icons 相同的方法，将未填充的心用作path-outer，将填充的心用作path-inner

看起来像这样：

<svg fill='#31a3f5;' height='24' viewbox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
   <g>
     <path class='path-outer' d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'></path>
     <path class='path-inner' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'></path>
  </g>
</svg>

但是，这里有些东西不起作用。未填充的心脏确实与原始心脏有不同的笔触，因为我会在没有外部和内部路径的情况下使用它。 我有在 g-Tag 上使用 stroke-width 属性的想法，但这并不适用。

是否可以以某种方式将两个图标组合在一起？我做错了什么？

Answer 1

您需要在<g> 或<path> 上指定fill 属性，而不是在包装<svg> 元素上（它在那里无效）。

使用 CSS 的简单解决方案：

/* Using two paths: */

.svg1 .heart-outer {
  fill: #31a3f5;
}

.svg1 .heart-inner {
  fill: transparent;
}

.svg1:hover .heart-inner {
  fill: #31a3f5;
}

/* Using just one path with stroke: */

.svg2 .heart {
  fill: transparent;
  stroke: #31a3f5;
  stroke-width: 2px;
}

.svg2:hover .heart {
  fill: #31a3f5;
}

<div>
  <p>Using two paths:</p>
  <svg class="svg1" height='24' viewbox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
     <path class='heart-outer' d='M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'></path>
     <path class='heart-inner' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'></path>
  </svg>
</div>

<div>
  <p>Using just one path with stroke:</p>
  <svg class="svg2" height='24' viewbox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
     <path class='heart' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'></path>
  </svg>
</div>