为什么此 SVG 渐变的浏览器渲染在 Inkscape 与 browser/AI 中不同
Why is the browser rendering of this SVG gradient different in Inkscape vs browser/AI
我的 SVG 图像中有一个渐变，它没有被忽略，但在 Inkscape 和主要浏览器（Chrome、Firefox、Edge）中呈现不同。我在 Inkscape 中创建了它，并在 Adobe Illustrator 中尝试了它，它也呈现出与浏览器相同的效果（此外，不会在内部阴影的填充上呈现模糊）。
是什么原因造成的，怎么会这样fixed/prevented？
这是渐变：
我在此处上传了更新的 SVG：https://svgshare.com/s/hm9（经过简化，只有有问题的阴影环）
来自 Inkscape 论坛 (https://inkscape.org/forums/other/gradient-in-inkscape-is-not-shown-in-browsers-chromeffedge-and-not-in-ia/#c42496) 的用户“Tyler Durden”找到了解决方案：
将单个路径分组，然后再次取消分组，然后保存。
这解决了问题。与转型有关。
另外，提到的遗留下来的“东西”可能是旧定义。
Inkscape 通常将渐变元素分成两部分，就像您的情况一样：
- 使用渐变的路径用
fill:url(#b), 引用它
<linearGradient id="b"> 定义放置渐变的位置，并使用 xlink:href="#a"、<linearGradient id="a"> 定义沿渐变的色标。
但 Inkscape 有一个错误：它假定渐变 #b 将包含有关放置渐变终点的位置的完整信息。这些是通过考虑六个属性来计算的：gradientUnits, x1, y1, x2, y2, gradientTransform.
在你的例子中，只有五个是在渐变 #b 上定义的，而第六个是在渐变 #a 上定义的。 spec 清楚在这种情况下该怎么做：
For any of the specified attributes not defined on the current element, the user agent must determine the value of the attribute for the template element and use it as the value for the current element.
渐变#a在这里起到了模板的作用，应该使用gradientTransform属性来决定在哪里放置渐变。浏览器执行此操作，并将渐变放置在大约。向右 600px，但 Inkscape 没有。
由于正确的放置是通过忽略属性实现的，解决方案很明确：从<linearGradient id="a">中删除gradientTransform属性。
您可以通过在外部文本或 XML 编辑器中编辑 SVG 或打开 Inkscape 的内部 XML 编辑器来完成此操作。 （Shift+Ctrl+X 或编辑 -> XML 编辑器...）
我的 SVG 图像中有一个渐变，它没有被忽略，但在 Inkscape 和主要浏览器（Chrome、Firefox、Edge）中呈现不同。我在 Inkscape 中创建了它，并在 Adobe Illustrator 中尝试了它，它也呈现出与浏览器相同的效果（此外，不会在内部阴影的填充上呈现模糊）。
是什么原因造成的，怎么会这样fixed/prevented？
这是渐变：
我在此处上传了更新的 SVG：https://svgshare.com/s/hm9（经过简化，只有有问题的阴影环）
来自 Inkscape 论坛 (https://inkscape.org/forums/other/gradient-in-inkscape-is-not-shown-in-browsers-chromeffedge-and-not-in-ia/#c42496) 的用户“Tyler Durden”找到了解决方案：
将单个路径分组，然后再次取消分组，然后保存。
这解决了问题。与转型有关。 另外，提到的遗留下来的“东西”可能是旧定义。
Inkscape 通常将渐变元素分成两部分，就像您的情况一样：
- 使用渐变的路径用
fill:url(#b), 引用它
<linearGradient id="b">定义放置渐变的位置，并使用xlink:href="#a"、 引用第二个渐变
<linearGradient id="a">定义沿渐变的色标。
但 Inkscape 有一个错误：它假定渐变 #b 将包含有关放置渐变终点的位置的完整信息。这些是通过考虑六个属性来计算的：gradientUnits, x1, y1, x2, y2, gradientTransform.
在你的例子中，只有五个是在渐变 #b 上定义的，而第六个是在渐变 #a 上定义的。 spec 清楚在这种情况下该怎么做：
For any of the specified attributes not defined on the current element, the user agent must determine the value of the attribute for the template element and use it as the value for the current element.
渐变#a在这里起到了模板的作用，应该使用gradientTransform属性来决定在哪里放置渐变。浏览器执行此操作，并将渐变放置在大约。向右 600px，但 Inkscape 没有。
由于正确的放置是通过忽略属性实现的，解决方案很明确：从<linearGradient id="a">中删除gradientTransform属性。
您可以通过在外部文本或 XML 编辑器中编辑 SVG 或打开 Inkscape 的内部 XML 编辑器来完成此操作。 （Shift+Ctrl+X 或编辑 -> XML 编辑器...）