BinaryDevelop
  1. ホーム
  2. html

[解決済み] SVG図形の太さを変更する

2022-03-01 05:11:44

質問

svgの描画に慣れていないのですが。

この矢印はSVG形式で持っています。矢印の太さを増やすにはどうしたらいいですか？ 

<div style="width: 100px; height:100px;">
  <svg viewBox="0 0 100 100">
    <path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)"></path>
  </svg>
</div>

ありがとうございました。

解決方法は？

でストロークを追加することができます。 stroke="black" stroke-width="10" を作成し、それに応じてviewBoxを調整します。 

OLD:
<div style="width: 100px; height:100px;">
  <svg viewBox="0 0 100 100">
    <path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)"></path>
  </svg>
</div>
<br>
NEW:
<div style="width: 100px; height:100px;">
  <svg viewBox="-10 -10 120 120">
    <path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)" stroke="black" stroke-width="10"></path>
  </svg>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します