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

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（您的fx/fy）的0％映射到渐变半径（您的cx/cy）之外的点，并且它没有显示。请注意，当您将 fx/fy 更改为渐变区域内时，它显示得很好。（这是一个 Chrome 错误 - 如果在渐变区域之外指定焦点，则应该将其设置在该区域周界上最近的点。这在 IE 和 Firefox 中已正确处理。我想我正在提交一个错误这。）

<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>