将SVG径向渐变蒙版应用于多个项目 [英] Applying an SVG Radial Gradient Mask to Multiple Items

问题描述

我有多个颜色和大小不同的svg圆，我想将其应用于径向渐变蒙版.有没有一种方法可以定义一个单独的遮罩，方法是将其拉伸以匹配该圆形的大小，以应用于每个圆形?

I have a number of differently colored and sized svg circles that I would like to apply a radial gradient mask to. Is there a way to define a single mask that is applied to each circle by stretching it to match that circle's size?

这是到目前为止我要提出的:

Here is what I've come up with so far:

<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)"/>

问题在于，相对于要应用蒙版的圆的大小，似乎无法测量蒙版/圆形中的百分比半径.

The issue is that the percentage radius in the mask/circle doesn't seem to be measured relative to the size of the circle the mask is being applied to.

有没有一种方法，而不必为我要应用的每个项目定义一个新的蒙版?

Is there a way of doing this without needing to define a new mask for each item I apply it to?

推荐答案

您也应该设置maskContentUnits="objectBoundingBox".这将使遮罩的内容相对于被遮罩对象的大小.

You should set maskContentUnits="objectBoundingBox" too. That will make the mask contents relative to the size of the masked object.

这篇关于将SVG径向渐变蒙版应用于多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！