如何解决如何从origo开始将圆形的径向渐变从objectboundingbox重写为userspaceonuse?
这里有一个以objectBoundingBox
坐标表示的径向渐变:
<svg width="800" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="myGradient3" cx="75%" fx="75%" cy="25%" fy="25%" r="50%" fr="0%">
<stop offset="25%" stop-color="gold" />
<stop offset="75%" stop-color="red" />
</radialGradient>
</defs>
<circle cx="100" cy="100" r="100" fill="url('#myGradient3')" />
</svg>
考虑具有以下不变量的径向渐变示例:
- 径向渐变是圆形的(不是椭圆形的)
- 只有一种形状代表径向渐变。
- 设置了属性
cx
,cy
,fx
,fy
,fr
,r
如果要将属性转换为使用userSpaceOnUseCoordinates
,应该重新计算该属性如何?
这是我在伪代码中的最佳尝试
const shapeBox = shape.getBBox() // {x: 0,y: 0,width: 200,height: 200}
userspaceCX = cx * bBox.width // 150 = 75% * 200
userspaceFX = fx * bBox.width // 150 = 75% * 200
userspaceCY = cy * bBox.height // 50 = 25% * 200
userspaceFY = fy * bBox.height // 50 = 25% * 200
userspaceR = r * sqrt(bBox.height^2 + bBox.width^2) // 70.71 = 50% * sqrt(5000) = 50% * sqrt(200^2 + 200^2)
userspaceFR = fr * sqrt(bBox.height^2 + bBox.width^2) // 0 = 0% * sqrt(5000) = 50% * sqrt(200^2 + 200^2)
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200">
<defs>
<radialGradient id="myGradient3__1" cx="150" fx="150" cy="50" fy="50" r="70.71" fr="0" gradientUnits="userSpaceOnUse">
<stop offset="25%" stop-color="#ffd700"/>
<stop offset="75%" stop-color="#f00"/>
</radialGradient>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#myGradient3__1)"/>
</svg>
但是您可以看到是否运行了代码片段,转换后的图像与原始图像有些不同。
使我无法完成这项工作吗?
解决方法
对角线长度的计算应为
sqrt(bbox.height^2 + bbox.width^2) / sqrt(2)
代替
sqrt(bbox.height^2 + bbox.width^2)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。