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> element定义颜色。

在所有情况下，您都以相同的方式使用它们：

<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的样式表，并且假设您没有指定填充属性，也会从其父元素中加入填充属性。在对代码的此更改中，颜色为红色。如果.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>

在SVG中定义颜色

2 个答案: