HTML / CSS内でSVGファイルを切り抜く方法
How Crop Svg File Within Html Css
解決：
作物
負の余白を使用し、親要素のサイズを固定することで、画像をトリミングできます。
サイズ変更およびトリミングされた画像をCSSで表示
しかし、これはSVGです！
svgをhtmlで直接表示できるだけでなく、次のようになります。
ただし、トリミング/サイズ変更するには、タグのviewBox属性を変更するだけです。
viewBox = '0 0100100'0〜100単位x＆y内のすべてを表示します
viewBox = '-100-100100100'-100から100単位x＆yまでのすべてを表示します
viewBox = '50 50500500 'xとyの50から500単位まで何でも表示します
これらの回答（および複数の類似/重複）のいずれも、これに完全に回答し、例を提供しているようには見えませんでした。
ステップバイステップ：SVGコード内で直接「パディング」（空白を囲む）を削除します
パディングなしでsvgの「実際の」サイズを決定します。私にとって、これは（Chrome）インスペクターを使用して、 道 インスペクター内の要素。ブラウザの実際のsvgの横に幅と高さが表示されます。
- 複数のパス要素がある場合、最後の要素は「含む」要素であることがよくあります。
次に、選択したテキスト/コードエディタでsvgコードを直接編集します。 svg要素タグ内のコードのみを変更します。
- 幅と高さの属性を、手順1で決定した「実際の」寸法に変更します。
- viewBox属性の4つの次元を変更します。ただし、単位はなく、数字だけです（つまり、10pxではなく10）。
- 3番目と4番目の数字から始めます。これも、「実際の」幅と高さになります。
- 1番目と2番目の次元は、viewBox内にあるsvgの部分の「原点」のx座標とy座標です。これらはそれぞれ（おそらく0 0から）次のように変更されます。 半分 初期の幅と高さと実際の幅と高さの差の。簡単に言うと、CSSの用語では、左マージンと上マージンです。
混乱している？簡単なステップバイステップの例
この例では、非常に単純になり、すぐ下のsvgを参照として使用します。この正確な例を確認したい場合は、以下のすべてのコードをHTMLタグでラップしてください。svgコードを開き、ブラウザで開きます。
+ステップ1を完了し、パディングなしでsvgの「実際の」ディメンションを決定できたと想定します。この例では、実際のサイズは40 x40です。これを反映するようにsvg属性を変更してください。
+初期寸法は48x 48で、実際の寸法（パディングなし）は40 x40です。この差の半分は4x 4です。それに応じてviewBox属性を変更し、実際の幅と高さを追加します。
viewBox = '4 4 40 40'+開始svgタグは、これらの変更を反映するはずです。
+ svgの周りのパディングの量が上/下と右/左で異なる場合、これは問題ではありません。上記の標準的な手順に従ってから、viewBoxプロパティの最初の2つの値を試して、これらの値がx軸とy軸に沿って画像をどのようにシフトするかを理解してください。
私は今夜、同じ問題を扱っている間にこのすべてを学びました。私よりもスケーラブルベクターグラフィックスの操作に精通している人からの提案/編集を完全に受け入れます
フラグメント識別子を使用して、必要なことを正確に実行できます。フラグメント識別子を使用すると、imgタグに表示するSVGのセグメントを定義できるだけでなく、画像の変換とアスペクト比を制御できます。
追加するsvg urlの最後にある#svgView（viewBox（0、0、32、32））は、表示するsvg内の領域を定義します。最初の2つのパラメーターは、ビューボックスの左上隅のx座標とy座標であり、次の2つのパラメーターは、ビューボックスの幅と高さです。
この手法を使用すると、imgタグは次のようになります。
ビューボックスのアスペクト比がimgタグのアスペクト比と一致していることを確認することが重要です。一致していない場合、ビューボックスのサイズや位置が正しく調整されません。アスペクト比をさらに制御する必要がある場合は、preserveAspectRatioSpecフラグメント識別子をいつでも使用できます。
画像全体のviewBoxを見つけるには、svg urlに直接アクセスし、ページ要素を調べて、最も外側のsvg要素で定義されているviewBoxを見つけます。
その情報を利用して、ビューボックスをニーズに合わせて調整できるようになりました。
CodePenの例はこちら