Как добраться до вложенных элементов SVG через USE?

Question

[Евгений Пипа]

Есть векторный спрайт вставлен в разметку:

</symbol><symbol id="social-mail" viewBox="0 0 30 31">
    <g clip-path="url(#clip0)">
    <circle cx="15" cy="15.75" r="15" fill="#9D6F3E"/>
    <path d="M20.9166 9.5835H8.91663C8.09163 9.5835 7.42413 10.2585 7.42413 11.0835L7.41663 20.0835C7.41663 20.9085 8.09163 21.5835 8.91663 21.5835H20.9166C21.7416 21.5835 22.4166 20.9085 22.4166 20.0835V11.0835C22.4166 10.2585 21.7416 9.5835 20.9166 9.5835ZM20.9166 12.5835L14.9166 16.3335L8.91663 12.5835V11.0835L14.9166 14.8335L20.9166 11.0835V12.5835Z" fill="white"/>
    </g>

И в нужном месте вставлен ссылкой на иконку:

<svg class="contacts__icon-mail" width="30" height="30">
            <use xlink:href="#social-mail"></use>
          </svg>

Есть ли способ добраться стилями во вложенные теги в svg, circle или path например для ховера?

Comments

[Ankhena]

Вам оба цвета нужно поменять или один?

Answer 1

[Максим]

Так как ни весь код предоставлен и не ясно что надо менять то покажу как это делается что бы можно было менять заливку у use при наведении



Как это работает ? Мы изначально должны убрать fill, stroke из всех элементов в которые передаются в use

В вашем случае, вы делаете clip-path то есть "фотошоповским" языком это обтравочная маска ... мы таким образом вырезаем нужный контур ... и как раз в clip-path - такие аргументы как fill и прочей декор по просту не нужны ...

Comments

[Евгений Пипа]

Спасибо за ответ.
Это понятно.
Но добавьте допустим в кружек ещё что то вложенное с другими цветами, если вешать fill на use, то он поменяет заливку всего, что вложено в svg, а наша задача состоит менять цвет у отдельных частей svg иконки.

[Максим]

Евгений Пипа, я завтра вечером буду дома, и дополню ответ, даже дам ссылку на сайт с реальным примером...я щас в другом городе

[Максим]

Евгений Пипа, дополнил