BinaryDevelop
  1. ホーム
  2. html

[解決済み] HTML/CSS内でSVGファイルをクロップする方法

2022-03-11 19:48:53

質問

以下のようなHTMLファイル( mypage.html ). A SVG ファイル が画像として添付されています。 

<!doctype html>
<html>


<body>

    <!-- Display legend -->
    <div>
        <center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
    </div>


</body>
</html>

生成されたページは次のようになります。

円の周りに大きな空白があることに注意してください。 これをhtmlやCSSで切り取るにはどうしたらよいでしょうか。

解決方法は？

作物

ネガティブマージンを使い、親要素のサイズを固定することで、画像を切り抜くことができます。

CSSで画像をリサイズ・クロップして表示する

しかし、これはsvgです。

htmlで直接svgを表示できるだけではありません。 

<svg viewBox="0 0 100 100" height="150px" width="150px">
  <rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/>
</svg>

しかし、クロップやリサイズを行うには、単に <svg> タグの viewBox 属性を変更すればよいのです。 

viewBox="0 0 100 100"

は、0から100までの単位 x & y を表示します。 

viewBox="-100 -100 100 100"

100から100までの単位を表示する x & y 

viewBox="50 50 500 500"

50台から500台まで表示されます x & y

関連

最新

おすすめ

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