1

Нужно поменять цвет с #222, на красный используя CSS и класс "svg_name"

<svg style="display: none;">
    <symbol id="Windows" viewBox="0 0 31.5 31.5">
        <g id="Icon_ionic-logo-windows" data-name="Icon ionic-logo-windows" transform="translate(-2.25 -2.25)">
            <path id="Контур_3" data-name="Контур 3" d="M33.75,18.633H16.313V31.219L33.75,33.75V18.633Z" fill="#222"/>
            <path id="Контур_4" data-name="Контур 4" d="M15.188,18.633H2.25V29.18l12.938,1.877V18.633Z" fill="#222"/>
            <path id="Контур_5" data-name="Контур 5" d="M33.75,2.25,16.313,4.739V17.508H33.75V2.25Z" fill="#222"/>
            <path id="Контур_6" data-name="Контур 6" d="M15.188,4.9,2.25,6.75V17.508H15.188V4.9Z" fill="#222"/>
        </g>
    </symbol>
</svg>

<svg width="31.5" height="31.5" class="svg_name" viewBox="0 0 31.5 31.5"><use xlink:href="#Windows"/></svg>

1 ответ 1

4

Для этого внутри symbol а точнее в path надо удалить fill и присваивать его для use смотрим пример

если нужен hover: https://codepen.io/topicstarter/pen/BaROPeR

.svg_name {
  fill: red;
}
<svg style="display: none;">
    <symbol id="Windows" viewBox="0 0 31.5 31.5">
        <g id="Icon_ionic-logo-windows" data-name="Icon ionic-logo-windows" transform="translate(-2.25 -2.25)">
            <path d="M33.75,18.633H16.313V31.219L33.75,33.75V18.633Z"/>
            <path d="M15.188,18.633H2.25V29.18l12.938,1.877V18.633Z" />
            <path d="M33.75,2.25,16.313,4.739V17.508H33.75V2.25Z" />
            <path d="M15.188,4.9,2.25,6.75V17.508H15.188V4.9Z" />
        </g>
    </symbol>
</svg>


<svg viewBox+ "0 0 32 32"><use href="#Icon_ionic-logo-windows" x="0" class="svg_name"/></svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.