Определить цвет в SVG

Question

Как определить цвет в файле SVG?

<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- define mycolor=red -->
    </defs> 

    <!-- use mycolor as fill -->
    <rect x="0" y="0" width="704" height="702" fill=mycolor/>
</svg>

Answer 1

Вы можете определить цвет с помощью градиента (<linearGradient> или <radialGradient>) или с помощью элемента <solidColor> .

Во всех случаях вы используете их одинаково:

<rect x="0" y="0" width="704" height="702" fill="url(#yourcolor)"/>

У градиентов должен быть только один дочерний элемент <stop> нужного цвета.Вы обнаружите, что на данный момент использование градиентов имеет лучшую межбраузерную поддержку, чем solidColor.

Пример определения цвета «градиента»:

<linearGradient id="yourcolor">
  <stop stop-color="#991132"/>
</linearGradient>

Answer 2

Вы можете использовать таблицу стилей с svg, и свойство fill также наследуется от его родительского элемента, если вы не укажете его. В этом изменении вашего кода цвет красный. Если бы этот цвет не был задан классом .myfill, он был бы унаследован от тега группы "G".

<?xml version="1.0"?>
<svg width="704" height="702" xmlns="http://www.w3.org/2000/svg">

<style>
.myfill { fill:red }
</style>

    <g fill="blue">
    <rect x="0" y="0" width="704" height="702" class="myfill" />
    </g>

</svg>