Файл SVG, который получал в наследство бы настоящий цвет

Используя SVG inline я могу способствовать тому, чтобы был получен в наследство настоящий цвет используя стоимость currentColor для свойства fill. Таким образом я могу способствовать тому, чтобы мое изображение приспособилось к цвету элемента, который это содержит. Например:

.rojo {
  color:red;
}

.verde {
  color:green;
}
<div class="rojo">
  <svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    <g id="dibujo">
      <circle cx="5" cy="5" r="4" fill="currentColor" />
    </g>
  </svg>
  Hola
</div>
<div class="verde">
  <svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    <g id="dibujo">
      <circle cx="5" cy="5" r="4" fill="currentColor" />
    </g>
  </svg>
  Adiós
</div>

Это гениально, потому что оно функционирует: круги видны различного включенного цвета, когда код для SVG - тот же самый в обоих случаях. Проблема состоит в том, что у меня не хочет быть тот же код inline часто.

Он предпочел бы, чтобы он был во внешнем файле, как этот, который я назову miImagen-svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    <g id="dibujo">
        <circle cx="5" cy="5" r="4" fill="currentColor" />
    </g>
</svg>

и тогда мочь добавлять это простой формы многообразные разы:

<div class="rojo">
  <img src="./miImagen.svg" alt="Mi SVG en rojo" />
  Hola
</div>
<div class="verde">
  <img src="./miImagen.svg" alt="Mi SVG en verde" />
  Adiós
</div>

Но если я это делаю, currentColor прекрати функционировать и видны круги в негре (я добавляю задержание результата, потому что он не позволяет мне пересылать SVG):

Captura con los círculos en negro en lugar de con color

Как я могу делать, чтобы включать "внешний" SVG, и который была бы получена в наследство стоимость currentColor?

Заметь: изображение, с которым я буду работать, - более большое и сложное, чем только один круг, что он меняет цвет, у него были бы многообразные цвета и линии, которые изменили бы цвет с currentColor. Поставили помещать ее в шрифт и включать ее как glyphicons Bootstrap или FontAwesome, но в большое и многоцветное существо, я не знаю, выполнимый ли этот выбор.

2
задан 22.11.2016, 19:45
2 ответа

Я нашел возможное решение, что, вместо того, чтобы использовать этикетку img, используй этикетку use внутри одного svg inline, и что функционирует, как я хочу.

То, что делает этикетку use дело в том, что он берет узлы внутри SVG и удваивает их, где была этикетка. Главным образом это как клонирование контента SVG, соединенного внутри SVG, который это соединяет посредством use. И лучшее состоит в том, что он кажется, что оно функционирует в Chrome, IE и Firefox без проблем.

Исходя из изображения SVG, которое я создал (который я назову miImagen.svg):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    <g id="dibujo">
        <circle cx="5" cy="5" r="4" fill="currentColor" />
    </g>
</svg>

То, что он сделал бы, состоит в том, чтобы создавать этикетку svg inline, который он включил (использовал) группу с id #dibujo miImagen.svg:

<svg>
  <use xlink:href="miImagen.svg#dibujo"></use>
</svg>

Использовав use, он как будто группа с id #dibujo внутри miImagen.svg он будет клонироваться и он был inline в документе, а следовательно стили CSS для цвета применяются благодаря currentColor и функционируй, как я хочу.

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

Но идея была бы следующей:

.rojo {
  color:red;
}

.verde {
  color:green;
}

svg {
  width:10px;
  height:10px;
}
<div class="rojo">
  <svg><use xlink:href="miImagen.svg#dibujo"></use></svg>
  Icono Rojo
</div>
<div class="verde">
  <svg><use xlink:href="miImagen.svg#dibujo"></use></svg>
  Icono Verde
</div>

Не так просто как использовать просто img но приспосабливают достаточно добра, в которое я хочу, и он не является чрезмерно сложным.


Хорошая вещь использования use дело в том, что возможно использовать с внешними и внутренними ресурсами, а именно, с элементами, которые уже находятся на странице. Так, другой выбор состоял бы в том, чтобы помещать мой SVG inline однажды и ссылаться на того же самого многообразные разы (но тогда он не использовал бы кэш-память браузера).

Здесь я оставляю пример:

#circulo-original {
  display:none;
}

.rojo {
  color:red;
}

.verde {
  color:green;
}

.circulo {
  width:10px;
  height:10px;
}
<!-- mi SVG original, inline y oculto -->
<svg id="circulo-original" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <g id="dibujo">
    <circle cx="5" cy="5" r="4" fill="currentColor" />
  </g>
</svg>

<div class="rojo">
  <svg class="circulo"><use xlink:href="#dibujo"></use></svg>
  Icono Rojo
</div>

<div class="verde">
  <svg class="circulo"><use xlink:href="#dibujo"></use></svg>
  Icono Verde
</div>

Какие-то ссылки, которые помогли мне с этим решением:

3
ответ дан 24.11.2019, 12:28

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

  1. Файл svg должен быть приходящим учеником
  2. Я должен мочь менять цвет различных элементов svg
  3. Нужно получать в наследство цвет элемента, который это содержит

Если с двумя первыми он стоит тебе, продолжи читать:

Нужно изменять файл svg, чтобы добавлять лист стилей помещая перед этикеткой svg следующее:

<?xml-stylesheet type="text/css" href="estilo.css" ?>

Кроме того, если как в случае, который ты предлагаешь нам в конце концов, он будет являться "сложным" svg (но не многий, чтобы не умирать помещая этикетки) и ты хочешь применить изменение цвета только к каким-то частям ты, должно быть, помещаешь признак class в каждый path который ты захотел изменить из-за CSS.

Однажды сделанный это способ менять цвет будет посредством листа стилей, не из-за наследства:

.pathPrueba1 {
    fill: red;
}

И в конце концов вводить для это в твоем HTML, ты должен добавлять это как один object:

<object type="image/svg+xml" data="mi.svg"></object>

Не имеет значения CSS, который ты применяешь к HTML, стиль дает ссылку, которую ты считаешь помещенной в файл SVG. Если ты захочешь применить к нему стиль в HTML, ты будешь должен прикреплять контент svg внутри, когда могут применять стили свободно к каждой части как уже ты сделал.

Все это я это достал из следующей ссылки: https://css-tricks.com / using-svg /

Приходит какой-то прием больше, скорее всего ты можешь находить решение, которое приспосабливалось бы больше к тому, что ты хочешь точно (он включает пример с дефокусировкой и другими вещами).

1
ответ дан 24.11.2019, 12:28
  • 1
    Он не заканчивает меня, эта solució функционирует; n. С собой añ adir лист стилей правильно, ¿ но сейчас có mo я могу использовать это для того, чтобы с тем же файлом применялись различные цвета? Когда определенный лист стилей, если я включаю два раза SVG в моем pá gina, два раза tendrá тот же цвет. Necesitarí в два файла SVG (с различными таблицами стилей) для того, чтобы оно я функционировало, ¿ нет? ¿ или есть какой-то способ перемещать его таблицу стилей как pará метр? –  Alvaro Montoro♦ 23.11.2016, 02:46
  • 2
    Нет, что ты сказал, правильно, это затруднение определения этого así но читая твой solució n покажись лучше @AlvaroMontoro. –  Awes0meM4n 23.11.2016, 18:24

Теги

Похожие вопросы