SVG 和动态调整大小 - vuejs

Question

几个星期以来我一直在拔头发。

我不知道如何处理 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)" 添加到路径，但这不是解决方法。

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

Answer 1

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

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

示例：

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

关于viewBox属性，那是另外一个概念：

The viewBox attribute defines the position and dimension, in user space, of an SVG viewport. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

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

Answer 2

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

除此之外，我手动试验了 viewBox 数字以获得不错的结果（正确的导出避免了这种手动工作）。正确设置 viewBox 属性后，您可以通过 classes 或内联 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>

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

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

SVG 和动态调整大小 - vuejs

SVG and dynamic resizing - vuejs

size

scaling

svg

vue.js