Question

我不确定是否有办法做到这一点。理想情况是：

在DOM
使用fill属性在整个DOM中的多个'circle'实例中引用它。

到目前为止一切顺利，现在使用脚本我想改变linearGradient的'stop-color'属性，但它只影响一个单独的圆。有没有办法做到这一点，而不必为每个实例都有linearGradient的副本？

下面的示例，我没有发布JS，因为这是个问题。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:cc="http://web.resource.org/cc/" 
     xmlns:dc="http://purl.org/dc/elements/1.1/" 
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
     xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" 
     xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="lampbevel" x1="0" y1="0" x2="1" y2="0">           
      <stop stop-color="#bfbfbf" offset="0" />           
      <stop stop-color="#404040" offset="1" />          
    </linearGradient>          
    <linearGradient id="lampcap" spreadMethod="pad" x1="0" y1="0" x2="1" y2="1">           
      <stop stop-color="#00ff00" stop-opacity="0.992188" offset="0" />           
      <stop stop-color="#000000" stop-opacity="0.988281" offset="1" />          
    </linearGradient>          
    <linearGradient id="lampspec" spreadMethod="pad" x1="0" y1="0" x2="1" y2="1">           
      <stop stop-color="#000000" stop-opacity="0.996094" offset="0" />           
      <stop stop-color="#ffffff" stop-opacity="0.984375" offset="0.703125" />          
    </linearGradient>        
  </defs>
  <g id="lamp1" transform="translate(0,0) scale(0.05)">
    <title>Lamp 1</title>
    <circle id="lamp1_3" fill="#212121" stroke-width="17.5" stroke-linecap="round" cx="320" cy="240" r="196.125"/>
    <circle id="lamp1_7" fill="url(#lampbevel)" stroke-width="17.5" stroke-linecap="round" cx="319.252837" cy="239.999045" r="160" fill-opacity="0.64"/>
    <circle id="lamp1_8" fill="url(#lampcap)" stroke-width="17.5" stroke-linecap="round" cx="320.000535" cy="240.001698" r="150"/>
    <ecllipse id="lamp1_20" transform="rotate(-47.7626 249.18 168.124)" fill="url(#lampspec)" stroke-width="17.5" stroke-linecap="round" cx="249.179609" cy="168.124194" rx="75.675959" ry="44.402987"/>
  </g>
</svg>

SVG linearGradient共享def但具有独特的颜色？

0 个答案: