Хобрук: Ваш путь к мастерству в программировании

Использование внешнего и внутреннего пути для значка материала SVG

Я хочу использовать SVG-изображение из Material Icon здесь: 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>

Однако здесь что-то не работает. Незаполненное сердце имеет другой ход, чем оригинал, поскольку я бы использовал его без внешнего и внутреннего путей. У меня была идея использовать атрибут stroke-width в g-Tag, но это неприменимо.

Можно ли как-то совместить две иконки друг с другом? Что я делаю неправильно?

svg html
02.10.2017

Ответы:


1

Вам нужно указать атрибут fill для <g> или <path>, а не для элемента-обертки <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>

02.10.2017
Новые материалы
Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..
Фишинг — Упаковано и зашифровано
Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..
ВЫ РЕГРЕСС ЭТО?
Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..
Не зря же это называют интеллектом
Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..
LeetCode Проблема 41. Первый пропущенный положительный результат
LeetCode Проблема 41. Первый пропущенный положительный результат Учитывая несортированный массив целых чисел, найдите наименьшее пропущенное положительное целое число. Пример 1: Input:..
Расистский и сексистский робот, обученный в Интернете
Его ИИ основан на предвзятых данных, которые создают предрассудки. Он словно переходит из одного эпизода в другой из серии Черное зеркало , а вместо этого представляет собой хронику..
Управление состоянием в микрофронтендах
Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..