Question

在线SVG基础课程的代码：

<body class="site">
    <figure class="theimage">
        <svg id="custom-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">

            <defs>
                <radialGradient id="sky" cx=".7" cy=".4" r=".5">
                    <stop stop-color="#00dffe" offset="0%" />
                    <stop stop-color="#38a3d1" offset="100%" />
                </radialGradient>
                <radialGradient id="sun">
                    <stop stop-color="yellow" offset="80%" />
                    <stop stop-color="hsla(60, 100%, 50%, 0)" offset="100%" />
                </radialGradient>
            </defs>

            <rect fill="url(#sky)" x="0" y="0" width="500" height="500" />
            <circle fill="url(#sun)" cx="350" cy="200" r="100" />
        </svg>
    </figure>
</body>

cx和cy值范围是0~1，为什么不是500,500（在viewBox中设置）？

在以下代码中：

<body class="site">
    <figure class="theimage">
        <svg id="custom-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <circle class="stroke fill" cx="40" cy="60" r="20" />
        </svg>
    </figure>
</body>

我想这是因为<radiaGradient>是嵌套的＆＃39;在外圈或其他外形中，cx或cy的范围为0到1（或100％）。但我在网上找不到一些参考资料。请为我澄清一下，或者为我提供一些有用的参考链接？提前谢谢。

Answer 1

渐变的默认行为是表示应用渐变的元素的边界框的分数大小。

要更改此行为，您可以使用属性gradientUnits：

objectBoundingBox使用边界框的分数（默认）。
userSpaceOnUse使用与应用渐变的元素相同的坐标系。

Answer 2

SVG规范可能包含您所需的内容：

https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementCXAttribute

“将绘制渐变，使100％渐变色标被映射到此最大（即最外圈）圆的周长。”

此外，规范包含：

“当百分比与定义渐变向量，图案图块，过滤器区域或屏蔽区域的属性一起使用时，百分比表示与对应的十进制值相同的值（例如，50％表示相同的值）如0.5）。“

（https://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBoxUnits）

为什么<radialgradient>中cx，cy的最大值为1

2 个答案: