Question

我正在尝试创建一个SVG精灵。

我已将SVG图像设置为100px宽，50px高度，然后将第二个偏移50。

如何设置实际图标的大小？目前，图标很大，而不是50px。

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100px" 
    height="50px">

    <defs>
        <g id="arrow">
            <path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
                L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
                c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
                c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
                c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
                c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
        </g>
    </defs>

    <use x="0" y="0" style="fill: #333" xlink:href="#arrow" />  
    <use x="50" y="0" style="fill: #999" xlink:href="#arrow" /> 

</svg>

这就是我所看到的：

Answer 1

请勿使用转换进行缩放

您缺少的是已定义的viewBox。如果未定义viewBox，则viewBox的大小与您定义的高度和宽度相同。

因此，当您绘制路径并且其某些点高于370时，它们将位于其容器之外。由于您定义的尺寸是100宽50高。将不会绘制任何值大于该大小的点。

定义视图框时，可以更改大小而不影响绘制的内容。

当我忘记如何正确扩展svgs时，这是我常用的文章：https://css-tricks.com/scale-svg/

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100px" 
    height="50px"
    viewBox="0 0 500 500">

    <defs>
        <g id="arrow">
            <path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
                L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
                c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
                c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
                c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
                c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
        </g>
    </defs>

    <use x="0" y="0" style="fill: #333" xlink:href="#arrow" />  
    <use x="50" y="0" style="fill: #999" xlink:href="#arrow" /> 

</svg>

Answer 2

喜欢这个？我刚刚将transform="scale(0.1)"属性添加到g标记，使其缩小了10倍

＆＃13;

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100px" 
    height="50px">

    <defs>
        <g id="arrow" transform="scale(0.1)">
            <path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
                L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
                c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
                c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
                c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
                c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
        </g>
    </defs>

    <use x="0" y="0" style="fill: #333" xlink:href="#arrow" />  
    <use x="50" y="0" style="fill: #999" xlink:href="#arrow" /> 

</svg>

＆＃13;

如何确定SVG的大小

2 个答案: