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

Ответ 1

Вы можете использовать таблицу стилей с 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>

Ответ 2

Вы можете определить цвет с помощью градиента (<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>