Sketch を介して 4 つのインライン SVG のコードを同じストローク幅と色でエクスポートしましたが、1 つの SVG はブラウザ間および Codepen のブラウザ内で不規則に動作します。
- すべての SVG のストローク幅は「2」ですが、Twitter の SVG で同じ効果を得るには、ストローク幅を「4」にする必要があります (Chrome、Firefox、および Safari に適用されます)。
- すべての SVG は stroke="#999999" によって同じ色になります:
- 私のプロジェクトは Chrome と Firefox 経由で直接表示されます: Twitter の svg ストロークは正しい色です
Chrome と Firefox での Codepen の例: Twitter アイコンが著しく明るくなり、ストロークが #c2c2c2 のように表示される
Safari での個人的なプロジェクトと Codepen の例: Twitter の svg ストロークは、Codepen と私の個人的なプロジェクトの両方で #c2c2c2 としてレンダリングされます
ソリューション'...
twitter svgのrectタグのfill="#999999"をfill="#fff "に変更することで、svgがSafariで正常に表示されるようになりました。この「修正」なしで正しい色をレンダリングした Chrome と Firefox は影響を受けません。
この修正は、私のコードペンの例とソースから表示した場合に Safari で機能します。ただし、Chrome と Firefoxは、この修正が適用されているかどうかにかかわらず、codepen の例を正しくレンダリングしません。どちらも、Twitter の svg をソース、修正済み、または修正なしから正しくレンダリングします。
私のソリューションは今のところ機能しますが、なぜ機能するのかわかりません。どんな洞察も大歓迎です！
<rect x="29.984127" y="0.716535433" width="24.5015702" height="20.6298476" fill="#fff"></rect>