为什么在Inkscape与浏览器/AI中，此SVG梯度的浏览器渲染不同
我的SVG图像中有一个梯度，但并未忽略，但在Inkscape与主要浏览器（Chrome，Firefox，Edge）中呈现不同。我在Inkscape中创建了它，然后只是在Adobe Illustrator中尝试了它，它也与浏览器相同（此外，并且不会在内部落下阴影的填充填充物上变得模糊）。
什么可能导致这一点，如何固定/预防？
这是梯度：
我已经在此处上传了更新的SVG： https://svgshare.com/s /hm9 （简化，只有有问题的阴影戒指）
I have a gradient in my SVG-image, which is not ignored, but rendered differently in Inkscape vs. the major browsers (Chrome, Firefox, Edge). I created it in Inkscape, and just tried it in Adobe Illustrator, which also renders it the same as the browsers (and in addition doesn't render the blur on the fill of the inner drop shadow).
What could cause this, and how could this be fixed/prevented?
This is the gradient:
I've uploaded an updated SVG here: https://svgshare.com/s/hm9 (simplified, having ONLY the problematic shaded ring)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Inkscape通常将梯度元素分为两个部分，例如在您的情况下：
fill：url（#B），＆lt; lineArgradient ID =“ b”＆gt;定义在何处放置梯度并引用第二个用xlink：href =“＃a”，＆lt; lineArgradient ID =“ a”＆gt;定义颜色沿梯度停止。但是inkscape有一个错误：它假设渐变
#B将包含有关将梯度终点放置在何处的完整信息。这些是通过考虑六个属性来计算的：gradientunits，x1，y1，x2，y2，gradienttransform。在您的情况下，其中只有五个是在渐变
#B上定义的，而第六个则在梯度#A上定义。 spec 在这种情况下该怎么办：渐变
#A在此处的模板中扮演的角色，gradientTransform应使用属性来确定放置梯度的位置。浏览器执行此操作，并将梯度放置约。右侧600px，但Inkscape没有。由于忽略属性可以实现正确的位置，因此解决方案是清晰的：从
＆lt; lineArgradient ID =“ A” a“ a”＆gt; 。您可以通过打开Inkscape的内部XML编辑器在外部文本中编辑SVG或XML编辑器来执行此操作。 （ shift + ctrl + x 或edit-编辑 - ＆gt; xml编辑器...）
Inkscape usually splits gradient elements into two parts, like in your case:
fill:url(#b),<linearGradient id="b">defines where to place the gradient and references the second one withxlink:href="#a",<linearGradient id="a">defines the color stops along the gradient.But Inkscape has a bug: it assumes that gradient
#bwill contain the full information about where to place the end points of the gradient. These are computed by taking into account six attributes:gradientUnits, x1, y1, x2, y2, gradientTransform.In your case, only five of them are defined on gradient
#b, while the sixth is defined on gradient#a. The spec is clear on what to do in that case:Gradient
#ais in the role of the template here, and thegradientTransformattribute should be used to determine where to place the gradient. Browser do this, and place the gradient approx. 600px to the right, but Inkscape does not.Since the correct placement is achieved by ignoring the attribute, the solution is clear: remove the
gradientTransformattribute from<linearGradient id="a">.You can do this by either editing the SVG in an external text or XML editor, of by opening Inkscape's internal XML editor. (Shift+Ctrl+X or Edit -> XML Editor...)
用户“ Tyler Durden”来自Inkscape论坛（ https://inkscape.org/forums/other/gradient/gradient-in-in-inkscape-is-is-not-not-shown-shown-in-browsers-chromeffedede-chromeffedede-and-not-in-in-ia /＃c42496 ）找到了一个解决方案：
将单个路径分组，然后再次将其解开，然后保存。
这解决了问题。与转型有关的事情。
所提到的“东西”也可能是旧的定义。
User "Tyler Durden" from the Inkscape forum (https://inkscape.org/forums/other/gradient-in-inkscape-is-not-shown-in-browsers-chromeffedge-and-not-in-ia/#c42496) found a solution:
Group the single path, then Ungroup it again, and then save.
This fixed the issue. Something to do with a transformation.
Also the mentioned "stuff" that's left behind may be old definitions.