使用css形状的SVG大小

我试图将图标宽度设置为svg容器的100％。这是我的问题：使用css形状的SVG大小

svg icons 这是SVG图标代码

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" class="icon"> 
<path width="100px" height="100px" fill-rule="evenodd" clip-rule="evenodd" d="M79.941,43.641h-4c-1.104,0-2-0.895-2-2c0-1.104,0.896-1.998,2-1.998h4 
    c1.104,0,1.999,0.895,1.999,1.998C81.94,42.747,81.046,43.641,79.941,43.641z M72.084,30.329c-0.781,0.781-2.047,0.781-2.828,0 
    c-0.781-0.78-0.781-2.047,0-2.827l2.828-2.828c0.781-0.781,2.047-0.781,2.828,0c0.781,0.78,0.781,2.047,0,2.828L72.084,30.329z 
    M69.137,45.936L69.137,45.936c1.749,2.086,2.806,4.77,2.806,7.706l0,0c0,5.227-3.349,9.66-8.014,11.305 
    c-0.027-1.336-0.434-2.66-1.222-3.807c3.054-1.127,5.235-4.055,5.235-7.498c0-4.418-3.581-8-7.999-8 
    c-1.601,0-3.083,0.482-4.333,1.291c-1.232-5.316-5.974-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999 
    c0,1.404,0.254,2.746,0.697,4h0.015c0.975,2.74,2.895,5.031,5.395,6.445l-0.058,0.057c-0.98,0.98-1.596,2.184-1.872,3.445 
    c-3.751-2.107-6.551-5.686-7.652-9.947l0,0c-0.33-1.281-0.524-2.617-0.524-4c0-8.836,7.163-15.998,15.998-15.998 
    c1.572,0,3.089,0.232,4.523,0.654c2.195-2.827,5.618-4.654,9.475-4.654c6.627,0,11.999,5.372,11.999,11.998 
    C69.942,43.157,69.649,44.602,69.137,45.936z M57.943,33.644c-2.212,0-4.214,0.898-5.662,2.35c2.34,1.436,4.286,3.453,5.629,5.853 
    c0.664-0.113,1.337-0.205,2.033-0.205c2.126,0,4.118,0.559,5.85,1.527l0,0c0.096-0.494,0.149-1.004,0.149-1.527 
    C65.942,37.225,62.361,33.644,57.943,33.644z M57.943,25.644c-1.104,0-1.999-0.895-1.999-1.999v-3.999c0-1.105,0.895-2,1.999-2 
    s2,0.895,2,2v3.999C59.943,24.749,59.048,25.644,57.943,25.644z M43.804,30.329l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828 
    c0.78-0.781,2.047-0.781,2.828,0l2.828,2.828c0.78,0.78,0.78,2.047,0,2.827C45.851,31.11,44.584,31.11,43.804,30.329z 
    M42.945,60.851l2.121,2.121c1.172,1.172,1.172,3.07,0,4.242c-1.171,1.172-3.07,1.172-4.242,0c-1.171-1.172-1.171-3.07,0-4.242 
    L42.945,60.851z M49.944,68.849l2.121,2.121c1.172,1.172,1.172,3.072,0,4.242c-1.171,1.172-3.07,1.172-4.242,0 
    c-1.171-1.17-1.171-3.07,0-4.242L49.944,68.849z M56.943,60.851l2.121,2.121c1.172,1.172,1.172,3.07,0,4.242 
    c-1.171,1.172-3.07,1.172-4.241,0c-1.172-1.172-1.172-3.07,0-4.242L56.943,60.851z"/> 
</svg>

感谢

来源

2014-09-12 mauriblint

路径没有宽度或高度属性。您需要使用带scale/translate的transform属性来调整它的大小。 – 2014-09-12 15:07:59

正如罗伯特Longson提到你可以将（规模）的路径，以正确的大小和改造（翻译），以确保它保持正确的位置

JSfiddle Demo

附加SVG路径信息

transform="translate(-40,-28) scale(1.66)

的值是该路径/视框的配置。

作为一种替代方法，您应该根据专用于此路径的set viewbox重新绘制路径以填充视图框。

来源

2014-09-12 15:38:46

使用css形状的SVG大小

回答

相关问题