異なるブラウザでの奇妙なインラインSVGグリッチ

Question

4つのインラインSVGのコードを同じストローク幅と色でスケッチでエクスポートしましたが、1つのSVGはCodepenのブラウザ内でブラウザ&で不当に動作します。

Codepen Example

-All SVGsが '2' のストローク幅を持っている、しかし、TwitterのSVGは（同じ効果を得るために'4'のストローク幅を必要とクロムは、Firefoxに適用されますクローム&のFirefox経由で直接観察

• マイプロジェクト：TwitterのSVG &サファリ）

  - すべてSVGsはストローク= "＃999999" を経由して同じ色でストロークが

クローム& Firefoxの上Codepen例正しい色である：Twitterのアイコンが著しく明るくなって、ストロークはSafariで＃c2c2c2

• 個人的なプロジェクト& Codepen例のように表示されます。さえずりSVGストロークがc2c2c2上の＃としてレンダリングされますCodepen &私の個人的なプロジェクト

'ソリューション' の両方...

twitter svgの'rect'タグでfill = "＃999999"〜fill = "＃fff"と変更すると、svgはSafariで通常表示されます。 Chrome & Firefoxはどちらもこの '修正'なしで正しい色を表示し、影響を受けません。

この修正プログラムは、ソースコードから見たコードサンプルの&のSafariで機能します。しかし、& Firefox は、この修正が適用されているかどうかにかかわらず、codepenの例を正しくレンダリングしません。は、ソース、修正、または修正なしで正しく表示されます。

私の解決策は現在のところ動作しますが、わかりません。なぜが動作するのですか？洞察力は大いにありがとう！

<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#fff"></rect> 

Answer 1

あなたが<svg>要素のセットが同様に見たい場合は、同じストローク幅が与えられたとき、あなたはそれらのviewbox -esが同じであることを確認する必要があります。あなたの例では、提供されたwidthとheightに収まるように各ビューボックスが拡大縮小されます。

たとえば、「Artboard」はIllustrator（viewbox）に一致します。だから、私がウェブプロジェクトのための一連のアイコンを作成するために出発するときは、最初に行うのは、すべてのアートボードのサイズが同じであることを確認することです。実際には、私は通常、別のレイヤーの各アイコンを含む同じアートボードからすべてをエクスポートします。

Sketchで同じことを達成できると確信しています。そうでない場合は、一致するように<svg>のビューボックスを変更できるツールを見つけてください。サイドノートとして

---

、あなたは（Glypther、Icomoon、Fontello、...）、アイコン、フォントのオンライン編集者やクリエイターの広大な配列を見てみることをお勧めしますが、あなたのを解決するために保証されていません問題。彼らはあなたのアイコンのサイズを自動的に変更し、中心に置いていますが、フォントを保存する前にそれを調整したり調整したりできるものもありますが、個人的には、異なるセットのviebox-esを使って<svg>を追加しようとしたことはありません。
問題が持続するかどうかは、インポートの仕方によって異なります。インポート時にアイコン間でビューボックスのサイズを統一し、アイコンを拡大縮小すると、問題が解決されます。しかし、それが上記のツールのどれかを意味するわけではありません。彼らは、イホ。