将 SVG 径向渐变蒙版应用于多个项目答案

【问题标题】：Applying an SVG Radial Gradient Mask to Multiple Items将 SVG 径向渐变蒙版应用于多个项目
【发布时间】：2013-10-25 04:50:19
【问题描述】：

我有许多不同颜色和大小的 svg 圆圈，我想对其应用径向渐变蒙版。有没有办法通过拉伸来定义应用于每个圆圈的单个蒙版以匹配该圆圈的大小？

这是我目前的想法：

<radialGradient id="radialGradient" cx=".5" cy=".5" r=".5">
  <stop offset="0%" stop-color="white" stop-opacity="0"/>
  <stop offset="100%" stop-color="white" stop-opacity="1"/>
</radialGradient>
<mask id="radialMask" maskUnits="objectBoundingBox" x="0" y="0" width="1.0" height="1.0">
  <circle cx="0" cy="0" r="50%" fill="url(#radialGradient)"/>
</mask>

...

<circle cx="10" cy="10" r="10" fill="red" mask="url(#radialMask)"/>
<circle cx="100" cy="100" r="50" fill="blue" mask="url(#radialMask)"/>

问题是蒙版/圆中的百分比半径似乎没有相对于蒙版应用到的圆的大小进行测量。

有没有一种方法可以做到这一点，而无需为我应用它的每个项目定义一个新的掩码？

【问题讨论】：

标签： svg mask radial-gradients

【解决方案1】：

你也应该设置maskContentUnits="objectBoundingBox"。这将使掩码内容相对于被掩码对象的大小。

【讨论】：