SVG в кодировке Base64 нельзя раскрасить ни с помощью встроенного стиля в HTML-разметке, ни с помощью класса в CSS

#html #css #svg

#HTML #css #svg

Вопрос:

У меня есть логотип SVG, который я хочу разместить несколько раз на одной странице. Каждый раз он должен отображаться другим цветом. Эти цвета определяются через серверную часть WordPress. Цвета применяются с помощью фрагмента, подобного этому:

 <div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>

SVG помещается в CSS и имеет кодировку base64. Внутри <svg> тега я также включил класс logotest . Но проблема в том, что SVG не становится цветным. Я создал пример pen с svg в кодировке base64:

http://codepen.io/rpkoller/pen/DuqBh

Он остается черным.В отличие от того факта, что встроенный стиль залил его красным, и даже присвоение зеленого цвета заливки для sktest класса вообще не имеет никакого эффекта.

Если я помещаю некодированный svg-код прямо в html в div, все работает так, как ожидалось. Назначение встроенного стиля, а также с помощью logotest класса:

http://codepen.io/rpkoller/pen/rdFup

Есть ли способ наладить работу с вариантом base64? С наилучшими пожеланиями, Ральф

Ответ №1:

Ваша проблема заключается в вашей реализации. Проблема, так сказать, не в base64, а в разнице между включением изображения в качестве фона CSS и включением его в HTML.

В HTML… Вы буквально можете прочитать код SVG в HTML. Поскольку эта HTML-разметка существует в DOM, она доступна для редактирования с помощью CSS через ваши классы. Если бы вы щелкнули правой кнопкой мыши по странице и выбрали «Просмотреть исходный код страницы», вы бы увидели код SVG в HTML.

В CSS вы добавляете изображение в качестве фонового изображения. Фоновые изображения не получают никакой HTML-разметки, которая выводится в DOM. Это … «эффект», если вы хотите так выразиться, который применяется к некоторому определяемому вами HTML-элементу. Если вы щелкните правой кнопкой мыши страницу и выберите «Просмотреть исходный код страницы», вы увидите элемент, к которому вы применяете фоновое изображение, но при этом не выводится дополнительная разметка, которую дальнейший CSS мог бы затем прочитать и изменить.

Какие у вас есть варианты? Ну, вы могли бы применить встроенный стиль непосредственно к изображению SVG, но это никоим образом не динамично, поэтому вы не сможете создать свой внутренний фрагмент для имен классов и тому подобного.

Другой вариант — включить SVG, как вы уже сделали, который называется «Встроенный SVG». Таким образом, вы можете изменить его с помощью CSS-кода.

1. Аааа, меня сводило с ума то, что я не смог изменить версию base64, но теперь я понимаю причину почему. Имеет полный смысл. 😉 Ну, тогда я полагаю, что я использую встроенный SVG в HTML. include_once скройте SVG с помощью CSS, а затем получите доступ к соответствующей части svg изнутри страницы с помощью <use xlink:href="… и оформите ее по желанию. Прохладный. Спасибо!

2. Рад, что смог помочь, похоже, вы разработали свое решение. =)