SVG 和动态调整大小 - vuejs答案

【问题标题】：SVG and dynamic resizing - vuejsSVG 和动态调整大小 - vuejs
【发布时间】：2020-11-06 15:39:31
【问题描述】：

我已经把头发从头上拔了好几个星期了。

我不知道如何处理 SVG 文件。本质上，我想将我所有的 svg 图标作为组件在 vue 中，所以我开始将它们转换为组件。这是一个svg的例子

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M.75 10.5A.749.749 0 010 9.75v-7.5a.749.749 0 01.75-.75h6a.749.749 0 01.75.75.75.75 0 01-.75.75H1.5v6h6V6.75A.75.75 0 018.25 6a.75.75 0 01.75.75v3a.75.75 0 01-.75.75zm3.97-3.22a.75.75 0 010-1.06l4.5-4.5a.727.727 0 01.08-.053L8.379.746A.437.437 0 018.687 0h2.876A.437.437 0 0112 .437v2.876a.436.436 0 01-.745.308l-.921-.921a.588.588 0 01-.053.08l-4.5 4.5a.749.749 0 01-.531.22.749.749 0 01-.531-.22z"/>
</svg>

现在我想把它包装成这样：

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
    viewBox="0 0 18 18"
    :aria-labelledby="iconName"
    role="presentation"
  >
    <title
      :id="iconName"
      lang="en"
    >{{ iconName }} icon</title>
    <g :fill="iconColor">
      <slot/>
    </g>
  </svg>
</template>

但是无论我做什么它都不会调整大小，我尝试将viewBox 更改为0 0 100 100 或动态0 0 width height，最后一个它确实发生了变化，但不是我理解的方式。

我也努力创建填充 svg 容器的路径，所以如果我改变宽度和高度，svg 总是大于路径，这也不是好的行为。我设法达到我想要的大小（但不是动态的）的唯一方法是将transform="scale(1.34,1.34)" 添加到路径中，但这不是解决方法。

创建这样的图标的最佳方法是什么？我炸了我的大脑。

【问题讨论】：

尝试移除 svg 元素的宽度和高度。
然后呢？我该如何调整它的大小？
没有宽度和高度的 svg 元素将占用所有可用宽度。

标签： vue.js svg size scaling

【解决方案1】：

它有助于确保从任何程序（Figma、Illustrator 等）很好地创建或导出 SVG 文件，以确保 SVG 中包含的画板上没有多余的空白。提供的 SVG 代码看起来像是 SVG 被放置在比图形本身大得多的画板上。

除此之外，我手动尝试了 viewBox 数字以获得不错的结果（正确的导出可以避免这种手动工作）。正确设置 viewBox 属性后，您可以通过类或内联 css 应用其他操作来实现您想要的结果。

<svg viewbox="0 0 12 11" xmlns="http://www.w3.org/2000/svg">
    <path d="M.75 10.5A.749.749 0 010 9.75v-7.5a.749.749 0 01.75-.75h6a.749.749 0 01.75.75.75.75 0 01-.75.75H1.5v6h6V6.75A.75.75 0 018.25 6a.75.75 0 01.75.75v3a.75.75 0 01-.75.75zm3.97-3.22a.75.75 0 010-1.06l4.5-4.5a.727.727 0 01.08-.053L8.379.746A.437.437 0 018.687 0h2.876A.437.437 0 0112 .437v2.876a.436.436 0 01-.745.308l-.921-.921a.588.588 0 01-.053.08l-4.5 4.5a.749.749 0 01-.531.22.749.749 0 01-.531-.22z"/>
</svg>

我建议使用类或样式绑定来连接 Vue 中的任何 css 样式，文档在此处介绍：https://vuejs.org/v2/guide/class-and-style.html

纯 SVG 和 Vue 版本的演示：https://codepen.io/nikcornish/pen/OJXoWvj

【讨论】：

太棒了，谢谢你，我想现在我明白它是如何工作的了！再次感谢

【解决方案2】：

你的意思是你想改变图标本身的大小对吗？

如果是这样，宽度和高度属性不会为您做任何事情。为此，您可以将常规 css 应用于您的 svg。

示例：

.my-svg {
  width: 100px;
  height: 100px;
}

关于 viewBox 属性，这是一个不同的概念：

viewBox 属性定义位置和尺寸，在用户空间，SVG 视口的。 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

编辑：请注意，您也可以使用svg-to-vue-component 将 SVG 用作组件。

【讨论】：