solidcolor

<solidcolor>

这是一项实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

该<solidcolor>SVG元素允许作者定义单一颜色的SVG文件在多个地方使用。这也是有用的动画调色板的颜色。

注意：这是一项实验性技术，尚未在浏览器中实现。解决方法是使用<linearGradient>只有一个颜色停止。这是不太优雅的，而<solidcolor>不是，本身不能用于定义的渐变。

用法上下文

暂无

属性

全局属性

Core attributes

Global event attributes

Presentation attributes

Style attributes

具体属性

None.

DOM界面

这个元素实现了SVGSolidcolorElement接口。

例子

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150">
  <defs>
    <!-- solidColor is experimental. -->
    <solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/>
      
    <!-- linearGradient with a single color stop is a less elegant way to 
         achieve the same effect, but it works in current browsers. -->
    <linearGradient id="myGradient">
      <stop offset="0" stop-color="green" />
    </linearGradient>
  </defs>
   
  <text x="10" y="20">Circles colored with solidColor</text>
  <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)"
      fill="white"/>
  <circle cx="50" cy="65" r="35" fill="url(#myColor)"/>

  <text x="10" y="120">Circles colored with linearGradient</text>
  <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)"
      fill="white"/>
  <circle cx="50" cy="165" r="35" fill="url(#myGradient)"/>
</svg>

结果

产品规格

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of '<solidcolor>' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	?	?	?	?	?	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?	?