スケーリング<use> d正しいアスペクト比を持つ外部SVG

（外部の）SVGアイコンを使用したいと思いますし、CSSを使用して塗りつぶしの色をスタイルできますように、私が見る限り、これを行う最善の方法は<svg><use xlink:href="…" /></svg>構造体を使用したい場所に配置します）。同時に、正しいアスペクト比でスケーラビリティを持たせたいので、さまざまなテキストサイズで使用することができます。スケーリング<use> d正しいアスペクト比を持つ外部SVG

しかし、height:1.5em;width:autoでスケーリングするAFAICSは、SVGにviewBoxがある場合にのみ機能します。そのviewBoxを取得する方法やそれを使わないでスケーリングを行う方法はありますか？

出典

2017-01-14 CrystalGamma

extrnal SVGアイコンは、外部アイコンファイル内にあるCSSによってのみスタイル設定することができます。 XMLHttpRequestを使用してアイコンファイルをロードすると、DOMを使用してviewBoxを読み取ることができます。 –

あなたのSVGをアイコンフォントに変換することです：たとえば、http://fontello.com/を使用してSVGをフォントに変換できます。 –

@RobertLongson：構造を使用しようとしていますXHRを使用する必要がなくなるためには、広告/スクリプト/リクエストブロッカーによってブロックされる可能性が高いより強力な機能であるためです。さもなければ、私はそれを使用したでしょう。 – CrystalGamma

SVGエディタでviewBoxが追加されていない場合は、サイズを自分で調整して手動で追加する以外に、簡単な方法はありません。

マウスを使用してくださいJavaScriptと適切な要素にgetBBox()を呼び出し、または
使用試行錯誤を使用し、あなたのエディタで読み出しを座標、または
。あなたが次元を絞り込むまで、x、y、幅、高さを反復してフィーリングします。

出典

2017-01-15 16:17:20

：外部ファイルにはviewBoxがあります。私の問題は、SVG要素が ' 'に自動的に設定する方法がわかりません。 – CrystalGamma

私はあなたの 'getBBox（）'提案を試みましたが、私は結果として常に空のSVGRectを取得します。 – CrystalGamma

私は必要なものは[SVGUseElement.instanceRoot]（http://html5index.org/SVG%20-%20SVGElementInstance.html）のようですが、少なくとも使用しているFirefox Nightlyは実装していません。 – CrystalGamma

スケーリング<use> d正しいアスペクト比を持つ外部SVG

答えて

関連する問題