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>

不使用未填充的心脏作为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

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

使用CSS的简单解决方案：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: