文章/答案/技术大牛

发布

社区首页 >问答首页 >调整从外部文件中包含的SVG大小

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

Stack Overflow用户

提问于 2018-03-14 17:12:35

回答 1查看 551关注 0票数 0

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

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

那个赛义德，我现在面临着缩放SVG的问题。我读了几本教程，但实际上我仍然不能设置我想要的SVG图标尺寸。如果这是一个正常的图像，我会写一条规则如下：

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

我知道，使用SVG，这是行不通的，因为它不是一个图像。

我试图设置viewBox属性，但实际上没有发生任何事情。
我试图将svg封装到一个div中，并将属性设置为它，但由于与上面相同的原因，我想什么也没有发生。

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

这是未来图标的收集器文件，目前只有一个图标，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>

在这里，我用HTML直接用svg创建了三次尝试的片段(不管它是否来自外部文件)

.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;
}

<!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>

html

css

svg

回答 1

Stack Overflow用户

发布于 2018-03-14 17:30:20

为了用CSS控制svg的大小，您应该使用viewBox属性，它“允许您指定给定的一组图形扩展以适应特定的容器元素”。您可以找到更多详细信息这里：

代码中的示例：

<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更改大小。希望能帮上忙！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49283890

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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