Question

我是新来的，可能有些问题太简单了。

最近我必须学习svg，我发现了一些疑惑。

这一个

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
     <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="0.13" fy="0.13">
         <stop offset="0%" stop-color="red"/>
         <stop offset="100%" stop-color="blue"/>
     </radialGradient>
</defs>
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
</svg>

左上角发生了什么？我在数学上很弱，我知道这是一个数学问题。可能有人帮助我吗？

Answer 1

您已将gradientStop的0％（您的fx / fy）映射到渐变半径之外的点（您的cx / cy），并且它没有显示。请注意，当您将fx / fy更改为渐变区域内部时，它会显示正常。（这是一个Chrome错误 - 如果在渐变区域之外指定焦点，则应将其设置在该区域周边的最近点。这在IE和Firefox中正确处理.I我猜错了。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
     <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15">
         <stop offset="0%" stop-color="red"/>
         <stop offset="100%" stop-color="blue"/>
     </radialGradient>
</defs>
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
</svg>

＆＃13;

Answer 2

试试这个 - 我将fx和fy都更改为50%

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
<defs>
     <radialGradient id="Gradient5" cx="0.5" cy="0.5" r="0.5" fx="50%" fy="50%">
         <stop offset="0%" stop-color="red"/>
         <stop offset="100%" stop-color="blue"/>
     </radialGradient>
</defs>
 
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
</svg>

在SVG渐变半径之外设置焦点剪辑Chrome上的渐变

2 个答案: