Question

我刚刚发现可以从外部精灵中包含svg，并通过<use>标记在HTML中使用它们。这种方法给了我两个好处：

在一个SVG文件中定义所有图标并按需使用每个图标
我可以直接操作SVG图标，特别是fill属性

那个说，我现在面临着扩展SVG的问题。我阅读了几个教程但我实际上仍然无法设置我想要的SVG图标尺寸。如果是普通图像，我会编写一条规则：

.icon {
    width: 2em;
    height: auto;
}

我理解SVG这不起作用，因为它不是图像。

我尝试设置viewBox属性但实际上没有发生任何事情。
我试图将svg包装在div内并设置属性，但是出于与上述相同的原因没有发生任何事情，我猜。

那么，我该如何调整SVG图标的大小？

这是未来的图标＆＃39;收藏家文件，目前只有一个图标sprite.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <path id="right-arrow-1" class="icon-1" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
</defs>

这是HTML页面：

<div id="wrapper">
    <div class="icon-wrap">
        <svg class="icon-x">
            <use href="/storage/icons/sprite.svg#right-arrow-1"></use>
        </svg>
    </div>
</div>

在这里，我使用svg直接在HTML中创建了这三次尝试的片段（如果它来自外部文件则无关紧要）

＆＃13;

.icon-2 {
  width: 5em;
  height:auto
  
}

.wrap {
  width: 5em;
  height:auto;
}

.icon-3 {
  width: 100%;
  height: 100%;
}


/* NOT important rules, just to let it more enjoyable */
.icon {
  fill: pink;
  -webkit-transition: fill linear 0.25s;
    -moz-transition: fill linear 0.25s;
    -ms-transition: fill linear 0.25s;
    -o-transition: fill linear 0.25s;
    transition: fill linear 0.25s;
}

.icon:hover {
  fill: red;
  -webkit-transition: fill linear 0.25s;
    -moz-transition: fill linear 0.25s;
    -ms-transition: fill linear 0.25s;
    -o-transition: fill linear 0.25s;
    transition: fill linear 0.25s;
}

＆＃13;

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
</head>
<body>
    <svg class="icon icon-1">
            <path id="right-arrow-1" class="icon-x" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
    </svg>
    <br>
    
    <svg class="icon icon-2">
        <path id="right-arrow-1" class="icon-x" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
    </svg>
    <br>
    
    <div class="wrap">
        <svg class="icon icon-3">
          <path id="right-arrow-1" class="icon-x" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
    </svg>
    </div>
</body>
</html>

＆＃13;

Answer 1

为了使用CSS控制svg的大小，你应该使用viewBox属性，它允许你指定一组给定的图形拉伸以适应特定的容器元素＆＃34;。您可以找到更多详细信息here：

代码中的示例：

<style>
  .icon-2 {height: auto; width: 15em;} /*change this and see results */ 
</style>

<svg class="icon icon-2" viewBox="0 0 150 150">
<path id="right-arrow-1" class="icon-x" d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
</svg>

您可以使用CSS更改大小。希望它有所帮助！

调整外部文件中包含的SVG大小

1 个答案: