SVG 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

用opacity定义透明度

有一个简单方法可以用来为整个元素设置透明度。它就是opacity属性:

<rect x="0" y="0" width="100" height="100" opacity=".5" />

  上面的矩形将绘制为半透明。还有两个分开的属性fill-opacitystroke-opacity,分别用来控制填充和描边的不透明度。注意,描边将绘制在填充的上面。因此,如果你在元素上设置了一个描边透明度,它同时还有填充,则填充将在描边上透过一半,另一半背景也将出现:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
</svg>