svgサイズを切り取った領域に縮小する方法は？

Question

クリッピングまでの実際のサイズ（幅と高さ）を減らすことはできますか？下記の例を見てみましょう：

基本的な "ベース"画像のサイズは272x136ピクセルです。クリッピング結果は17x17ピクセルのサイズです。今度は、結果として得られるsvgが17x17ピクセルにサイズ変更されるようにしたいと思います。それも可能ですか？

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <defs> 
 
\t \t <clipPath id="cut-off-bottom"> 
 
\t \t \t <rect x="102" y="102" width="17" height="17"/> 
 
\t \t </clipPath> 
 
\t </defs> 
 
\t <image xlink:href="https://openmaptiles.github.io/osm-bright-gl-style/sprite.png" clip-path="url(#cut-off-bottom)" /> 
 
</svg>

Answer 1

あなたがビューボックスで見たいと、あなたは私がしまし外側<svg>要素の幅と高さ

を使用して好きにSVGのサイズを設定した領域を選択しますまた、画像要素に幅と高さの属性を追加したので、Chrome/Opera以外のブラウザでも機能します。

<svg width="17px" height="17px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="102 102 17 17"> 
 
     <defs> 
 
       <clipPath id="cut-off-bottom"> 
 
         <rect x="102" y="102" width="17" height="17"/> 
 
       </clipPath> 
 
     </defs> 
 
     <image xlink:href="https://openmaptiles.github.io/osm-bright-gl-style/sprite.png" clip-path="url(#cut-off-bottom)" width="272px" height="136px" /> 
 
</svg>