SVGアイコンを強制的に縮尺する方法は？

以下は、青のDIVに表示されるSVGアイコンの簡単な例です。まず、CSS：SVGアイコンを強制的に縮尺する方法は？

div.box { 
    width: 72px; 
    height: 72px; 
    background-color: blue; 
} 

svg.icon { 
    width: 72px; 
    height: 72px; 
    color: white; 
    fill: currentColor; 
}

...そして今、HTML：

<body> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
     <defs> 
      <g id="box-icon"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"></path></g> 
     </defs> 
    </svg> 


    <div class="box"> 
     <svg class="icon" viewBox="0 0 72 72"><use xlink:href="#box-icon"></use></svg> 
    </div> 
</body>

はDIV、アイコン、アイコンのビューボックスは、すべて72個のピクセルにサイズ設定されていることをhttps://jsfiddle.net/b9fxvu7k/

ノートを参照してください。。しかし、ブラウザは、DIV、アイコン、およびビューボックスに指定するサイズに関係なく、アイコンを24ピクセルにレンダリングすることを主張しています。コンテナのサイズまで拡大するにはSVGアイコンが必要です。誰が何が欠けているのを見ますか？または、私が指定したSVGパスが24x24にハードコードされていますか？

出典

2017-05-31 Bob Arlof

あなたはこのように、transform属性を使用してgにスケールファクタを追加することができます。

#button-icon { 
    transform: scale(3); 
}

しかし、どうやらCSS方式：

<g transform="scale(3)" ...

あなたはまた、CSSで同じ結果を得ることができますIEでは動作しません。

出典

2017-05-31 21:28:36 Hassan

ありがとう、ハッサン！私は、青いボックスの外にアイコンが移動しないようにするために、CSSソリューションにも "transform-origin：0 0"が必要であることを発見しました。そして、あなたが述べたように、それはIEではまったく動作しません。しかし、 "g"要素の変換属性は、IE（少なくともIE 11）でも完璧に機能しました。 –

SVGアイコンを強制的に縮尺する方法は？

答えて

関連する問題