在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属性,则还会从其父元素中获取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>