位置<use> svgパス

私はインターネット上のどこかから得たアイコンパスをすぐに置き換える必要があります。 <use>と一緒に<symbol>を使用した私の最初の試みは、大きな変化にもかかわらず私が望むものを私に与えません（アイコンは下の例の四角の中に入りません）。その後私は、<symbol>の代わりに<g>を使用すると、そのトリックを行いますが、手作業でパスをスケーリングすることを犠牲にしていることがわかりました。自動スケーリングはより良いので、<symbol>で正確に位置付ける方法があるはずです。位置<use> svgパス

W3 specsは、参照が<symbol>、<svg>、またはその他のですが、それは右の私の頭の上に飛ぶかどうかに応じて<use>の異なる動作を言及します。

<!DOCTYPE html> 
 
<title>Icon won't get in box</title> 
 

 
<body> 
 
<svg> 
 
<defs> 
 
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol> 
 
<g id='back2' transform='scale(.062)'> 
 
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path> 
 
</g> 
 
</defs> 
 

 
<g transform='translate(50,50)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#backward' height='30' x='0' y='0' /> 
 
</g> 
 

 
<g transform='translate(50, 100)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#back2' x='0' y='0' /> 
 
</g> 
 
</svg> 
 
</body>

出典

2016-06-27 bongbang

<use>にはwidth="30"を追加するだけです。

<svg> 
 
<defs> 
 
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol> 
 
<g id='back2' transform='scale(.062)'> 
 
<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path> 
 
</g> 
 
</defs> 
 

 
<g transform='translate(50,50)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#backward' width="30" height='30' x='0' y='0' /> 
 
</g> 
 

 
<g transform='translate(50, 100)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#back2' x='0' y='0' /> 
 
</g> 
 
</svg>

幅が設定されていない、100％にはデフォルトシンボルは、100％のX 30pxビューポートの中心にされています。そのボックスを表すアウトラインを追加すればわかります。

ここで、「100％」はSVG幅の100％を意味します。その値は300pxで、ブラウザが不確定幅の要素に与えるデフォルトの幅です。

<svg overflow="visible"> 
 
<defs> 
 
<symbol id="backward" viewBox="0 0 477.175 477.175"><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></symbol> 
 
</defs> 
 

 
<g transform='translate(50,50)'> 
 
<rect height='30' width='30' fill='#DDD' /> 
 
<use xlink:href='#backward' height='30' x='0' y='0' /> 
 
<rect width="100%" height="30" fill="none" stroke="red" /> 
 
</g> 
 

 
</svg>

出典

2016-06-27 09:37:26

シンボルはInkscapeのようなSVGエディタで作成したが、その後、適切にクリーンアップされていなかったようにそれは私には見えます。特にこのようなシンプルなシンボルの場合、精度の小数点以下7桁までの3次ベジェ曲線を使用する理由は何もありません。

SVGコードを大幅に単純化するためにシンボルを再作成することをお勧めします。そのような基本的な矢印の場合は、単に<polyline>要素を使用することもできます。適切に定義されたシンボルは非常に簡単に<use>になるでしょう。

出典

2016-06-27 00:40:16

私は他の事に取り組んでいる間、私はプレースホルダとしてこれを使用するだろうと思いました。また、私自身のSVGパスも同じ問題を抱えている可能性があります。私は「クリーンアップ」する方法も知らないし、私の問題は「」の内部のものと関係していると本当に信じていますか？（パスは私の2番目の方法と同じように機能するので、私はそれを疑う。） – bongbang

位置<use> svgパス

答えて

関連する問題