opacity 透明度

详细介绍SVG的opacity透明度属性，包括整体透明度、填充透明度和描边透明度的设置方法。通过实例掌握透明度的各种应用技巧。 SVG提供了三种透明度控制方式：opacity、fill-opacity和stroke-opacity，分别控制整体、填充和描边的透明度。

三种透明度属性

opacity 整体透明度

opacity属性同时影响填充和描边的透明度。

<rect x="30" y="30" width="60" height="60" fill="#3498db" stroke="#2980b9" stroke-width="3" opacity="1"/>
<rect x="110" y="30" width="60" height="60" fill="#3498db" stroke="#2980b9" stroke-width="3" opacity="0.7"/>
<rect x="190" y="30" width="60" height="60" fill="#3498db" stroke="#2980b9" stroke-width="3" opacity="0.3"/>

fill-opacity 填充透明度

fill-opacity只影响填充部分，不影响描边。

<rect x="30" y="30" width="60" height="60" fill="#3498db" stroke="#2980b9" stroke-width="3" fill-opacity="1"/>
<rect x="110" y="30" width="60" height="60" fill="#3498db" stroke="#2980b9" stroke-width="3" fill-opacity="0.5"/>
<rect x="190" y="30" width="60" height="60" fill="#3498db" stroke="#2980b9" stroke-width="3" fill-opacity="0.2"/>

stroke-opacity 描边透明度

stroke-opacity只影响描边部分，不影响填充。

<rect x="30" y="30" width="60" height="60" fill="#3498db" stroke="#e74c3c" stroke-width="5" stroke-opacity="1"/>
<rect x="110" y="30" width="60" height="60" fill="#3498db" stroke="#e74c3c" stroke-width="5" stroke-opacity="0.5"/>
<rect x="190" y="30" width="60" height="60" fill="#3498db" stroke="#e74c3c" stroke-width="5" stroke-opacity="0.2"/>

属性叠加效果

当同时设置多种透明度属性时，效果会叠加计算。

<rect x="30" y="30" width="60" height="60" fill="#3498db" stroke="#e74c3c" stroke-width="5" fill-opacity="0.5" stroke-opacity="0.5"/>
<rect x="110" y="30" width="60" height="60" fill="#3498db" stroke="#e74c3c" stroke-width="5" opacity="0.5"/>
<rect x="190" y="30" width="60" height="60" fill="#3498db" stroke="#e74c3c" stroke-width="5" opacity="0.5" fill-opacity="0.5"/>

图形叠加效果

透明度让多个图形可以叠加显示，产生混合效果。

<circle cx="100" cy="75" r="50" fill="#e74c3c" opacity="0.7"/>
<circle cx="150" cy="75" r="50" fill="#3498db" opacity="0.7"/>
<circle cx="200" cy="75" r="50" fill="#2ecc71" opacity="0.7"/>

实际应用

玻璃效果

<rect x="80" y="30" width="140" height="90" fill="#fff" opacity="0.3" rx="10"/>
<rect x="80" y="30" width="140" height="90" fill="none" stroke="#fff" stroke-width="2" opacity="0.5" rx="10"/>
<text x="150" y="80" text-anchor="middle" font-size="14" fill="#fff">玻璃效果</text>

阴影层次

<ellipse cx="155" cy="120" rx="60" ry="15" fill="#000" opacity="0.1"/>
<ellipse cx="152" cy="117" rx="55" ry="12" fill="#000" opacity="0.15"/>
<ellipse cx="150" cy="115" rx="50" ry="10" fill="#000" opacity="0.2"/>
<rect x="100" y="30" width="100" height="80" fill="#3498db" rx="5"/>

高亮区域

<rect x="30" y="30" width="240" height="90" fill="#f8f9fa"/>
<rect x="80" y="45" width="140" height="60" fill="#3498db" opacity="0.2"/>
<text x="150" y="80" text-anchor="middle" font-size="12" fill="#333">高亮选中区域</text>

数据可视化

<rect x="30" y="80" width="40" height="50" fill="#3498db" opacity="0.8"/>
<rect x="80" y="50" width="40" height="80" fill="#3498db" opacity="0.8"/>
<rect x="130" y="30" width="40" height="100" fill="#3498db" opacity="0.8"/>
<rect x="180" y="60" width="40" height="70" fill="#3498db" opacity="0.8"/>
<rect x="230" y="40" width="40" height="90" fill="#3498db" opacity="0.8"/>

与RGBA颜色对比

透明度属性与RGBA颜色都可以实现半透明效果，但有区别：

<rect x="30" y="30" width="100" height="80" fill="rgba(52, 152, 219, 0.5)" stroke="#2980b9" stroke-width="3"/>
<rect x="170" y="30" width="100" height="80" fill="#3498db" stroke="#2980b9" stroke-width="3" fill-opacity="0.5"/>