☰

x2 属性が存在しない場合、SVG 線形グラデーションはソフトウェアによって異なって表示されます。

tag-icon • tag-icon browser inkscape svg standards
x2 属性が存在しない場合、SVG 線形グラデーションはソフトウェアによって異なって表示されます。

最近、ファイルをインポートして編集しましたインクスケープ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 画像ビューア (“Eye of GNOME”): Inkscape または Eye of GNOME の SVG 画像の例

Firefox および Chromium Web ブラウザでは次のようになります。 Firefox または Chromium での SVG 画像の例

しかし、私は気づいたx2="1"要素に属性を追加すると<linearGradient>、画像はすべてのビューアで同じように見えます。。

残念ながら、私はSVGファイル形式の詳細とSVG 標準しかし、私には明らかであるように思える私のファイルの解釈の 1 つは間違っているはずです (つまり、標準に違反しています)どちらの側が正しいのか（つまり、どのプログラムに対してバグレポートを提出すべきか）を知っている人はいますか？

答え1

どちらの表現が正しいのかはまだ完全にはわかりませんが、Inkscape と Eye of GNOME の両方で私の例の動作に影響するバグを発見したので、Web ブラウザーによって表示される表現であると思われます (以下を参照)。

私持っているこの問題に最初に気付いた理由がわかりました。Inkscape で開いた SVG ファイルには、<linearGradient>属性gradientUnits="userSpaceOnUse"と がありました (私の例のように)。「最適化された SVG」として保存すると、Inkscapeはこれを と同等と解釈し、属性のデフォルトである属性x2="1"を「最適化して削除」しました。x2="1"x2="100%"x2SVG標準で規定されているしたがって省略することもできます。しかし、Inkscapeの の解釈はx2="100%"（x2="1"おそらく）間違っています。これはInkscape バグ #1153706。

この問題に関する調査で、さまざまなソフトウェアがgradientUnits="userSpaceOnUse"グラデーション ベクトル属性x1、x2、を組み合わせて を処理する方法についてさまざまな矛盾に遭遇しました。以下は、すでに存在していたバグ レポート、または調査の結果として私が自分y1でy2提出したバグ レポートです。

関連情報