同じアイコンがgulp svgスプライトと異なるサイズですか？ <a href="https://github.com/jkphl/gulp-svg-sprite" rel="nofollow">https://github.com/jkphl/gulp-svg-sprite</a></p> <p>一気-SVG-スプライトを使用して

Question

イムは、異なるサイズで同じアイコンを使用することが可能ですか？

http://codepen.io/anon/pen/qZQvYN

.icon-small, 
.icon-large { 
    background-image: url(https://lincolnloop.com/static/assets/img/lincolnloop-mark.9b93136b4561.svg); 
    background-size: 100% 100%; 
} 

.icon-small { 
    width: 50px; 
    height: 50px; 
} 

.icon-large { 
    width: 100px; 
    height: 100px; 
} 

しかし、今、私は私がバックグラウンドとして、このソリューションを使用するカントスプライトを使用していていること：これは簡単だったし、実際に私がSVGsについて最も好きなものの一つであったspriting前サイズはmixinから来ます。私がこれを上書きしたとしても、バックグラウンドポジションは間違っています。

http://codepen.io/anon/pen/JXezaK

.icon-small, 
.icon-large { 
    background-image: url(https://scotthsmith.com/projects/social-icons/blue/IconGrid.svg?v1.11); 
    background-size: auto 400px; 
    border: 1px solid grey; 
} 

.icon-small { 
    width: 50px; 
    height: 50px; 
} 

.icon-large { 
    width: 100px; 
    height: 100px; 
} 

Answer 1

私はあなたのSVGのテキストを持っていないと仮定します。そして、transform: scale(2)を使用すると、それを修正する必要があります

.icon-large { 
    width: 50px; 
    height: 50px; 
    transform: scale(2) 
} 

This SO questionは、同様の問題を議論しているようです。

Answer 2

もう1つの方法は、幅と高さをemsで指定し、font-sizeを使用してアイコンの拡大/縮小を行うことです。

詳しい情報は、このブログ記事で読むことができます。 https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/