时间戳

首页 > 解决方案 > 如何将固定宽度和高度设置为 svg

css - 如何将固定宽度和高度设置为 svg

问题描述

我想为标记图标width: 24px和设置固定尺寸height: 34px，但是width和height不起作用。

<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 24 24" style="background-size:24px 34px;" xml:space="preserve" width="24px" height="34px">
    <style type="text/css">
        .st0{fill:#FFFFFF;}
        .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#B71C1C;}
        .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
    </style>
    <g id="Group_1_" transform="translate(7.000004, 5.000002)">
        <path class="st0" d="M5,1.1c-2.9,0-5.2,2.3-5.2,5.2c0,2.3,1.3,3.9,2.4,5.2c0.3,0.4,0.6,0.7,0.8,1c0.6,0.8,0.8,1.5,0.9,1.9
        C4.1,15,4.3,15.6,5,15.6s0.9-0.6,1.1-1.1s0.4-1.1,0.9-1.9c0.2-0.3,0.5-0.7,0.8-1c1.1-1.3,2.4-2.9,2.4-5.2C10.2,3.4,7.9,1.1,5,1.1z" />
        <path class="st1" d="M5,1.6c-2.6,0-4.7,2.1-4.7,4.7c0,2.8,2,4.4,3.1,5.9C4.6,14,4.3,15,5,15s0.4-1.1,1.6-2.8
        C7.7,10.7,9.7,9,9.7,6.3C9.7,3.7,7.6,1.6,5,1.6" />
        <path class="st2" d="M5,4.5c1,0,1.8,0.8,1.8,1.8S6,8.1,5,8.1S3.2,7.3,3.2,6.3S4,4.5,5,4.5" />
    </g>
</svg>

标签： csssvg

解决方案

清理了您的 SVG，因为您在尺寸设置上堆叠尺寸设置

由你来玩viewBox，translate和width

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 180" width="120">
    <rect width="100%" height="100%" fill="green" />
    <g transform="translate(9, 5)">
        <path fill="white"
            d="m50 11c-29 0-52 23-52 52c0 23 13 39 24 52c3 4 6 7 8 10c6 8 8 15 9 19c2 6 4 12 11 12s9-6 11-11s4-11 9-19c2-3 5-7 8-10c11-13 24-29 24-52c0-30-23-53-52-53z" />
        <path fill="#B71C1C"
            d="m50 16c-26 0-47 21-47 47c0 28 20 44 31 59c12 18 9 28 16 28s4-11 16-28c11-15 31-32 31-59c0-26-21-47-47-47" />
        <path fill="white" d="m50 45c10 0 18 8 18 18s-8 18-18 18s-18-8-18-18s8-18 18-18" />
    </g>
</svg>

  • d=https://yqnn.github.io/svg-path-editor中的路径乘以 10
  • 乘以10并去掉viewBox所有小数
  • 然后我调整了大小viewBox
  • 您的原件有一个translate(7,5)，但它需要额外向右移动才能在绿色矩形中对齐。

简化：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 180" width="120">
    <rect width="100%" height="100%" fill="green" />
    <path fill="#B71C1C" stroke="white" stroke-width="5"
        d="m60 16c-29 0-52 23-52 52c0 23 13 39 24 52c3 4 6 7 8 10c6 8 8 15 9 19c2 6 4 12 11 12s9-6 11-11s4-11 9-19c2-3 5-7 8-10c11-13 24-29 24-52c0-30-23-53-52-53z" />
    <circle cx="50%" cy="63" r="18" fill="white" />
</svg>

推荐阅读