☰

当不存在 x2 属性时，不同软件显示的 SVG 线性渐变不同

tag-icon • tag-icon browser inkscape svg standards
当不存在 x2 属性时，不同软件显示的 SVG 线性渐变不同

我最近导入并编辑了一个文件Inkscape。我在 Inkscape 中将图像保存为“优化 SVG”，但是当我在不同的程序中打开生成的文件时，有些程序显示它与 Inkscape 相同，而其他程序没有应用特定的线性渐变（而图像的所有其他部分，包括渐变，都工作正常）。

背景故事到此为止。我将原始图像压缩为一个最小示例，并确定了 SVG 源的哪一部分使不同的查看器表现不同。这是我的示例 SVG 文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="982" width="982" version="1.1"
 viewBox="0 0 982 982">
 <defs>
  <linearGradient id="a" gradientUnits="userSpaceOnUse"
   gradientTransform="matrix(-62.075 1070.8 1070.8 62.075 521.8 -42.09)">
   <stop stop-color="#bbb9c2" offset="0"/>
   <stop stop-color="#3f3" offset="1"/>
  </linearGradient>
 </defs>
 <path fill="url(#a)" d="m0 491.11c0 271.12 219.78 490.89 490.85 490.89 271.13 0 490.92-219.77 490.92-490.89 0-271.07-219.79-490.86-490.92-490.86-271.07 0-490.85 219.79-490.85 490.86"/>
</svg>

这是在 Inkscape 中的样子，GNOME 图像查看器（“GNOME 之眼”）： Inkscape 或 GNOME 之眼中的 SVG 图像示例

它在 Firefox 和 Chromium 网络浏览器中的样子如下： Firefox 或 Chromium 中的 SVG 图像示例

然而，我注意到x2="1"如果向元素添加属性<linearGradient>，则图像在所有这些查看器中看起来都一样。

不幸的是，我不太熟悉 SVG 文件格式的细节以及SVG 标准但对我来说，很明显的是对我的文件的其中一个解释一定是错误的（即违反了标准）。有谁知道哪一方是正确的（即我应该为哪些程序提交错误报告）？

答案1

好的，所以我还不完全确定这两种表示中的哪一种是正确的，但我怀疑它是由 Web 浏览器显示的，因为我发现了影响我在 Inkscape 和 Eye of GNOME 中的示例中的行为的错误（见下文）。

我有弄清楚了为什么我一开始就意识到了这个问题：我用 Inkscape 打开的 SVG 文件有一个<linearGradient>带有属性gradientUnits="userSpaceOnUse"和的x2="1"（就像我的例子一样）。当保存为“优化的 SVG”时，Inkscape“优化”了该x2="1"属性，因为它将其解释为等同于，这是该属性x2="100%"的默认值x2按照 SVG 标准规定因此可以省略。然而x2="100%"，Inkscape 对⇔的解释x2="1"（可能）不正确——这是Inkscape 错误 #1153706。

在我对这个问题的研究中，我发现不同的软件gradientUnits="userSpaceOnUse"在处理梯度向量属性x1、x2和y1时存在各种不一致的情况y2。以下是已经存在的或我自己根据我的发现提交的错误报告：

相关内容