html - 带有CSS的形状的SVG大小

Question

我试图将图标宽度设置为 svg 容器的 100%。这是我的问题:

这是 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>

谢谢

Answer 1

正如 Robert Longson 所提到的，您可以将路径转换(缩放)到正确的大小并转换(平移)它以确保它保持正确的位置

JSfiddle Demo

额外的 SVG 路径信息

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

这些值适用于此路径/ View 框配置。

作为替代方案，您应该考虑根据用于此路径的设置 View 框重新绘制路径以填充 View 框。