如何在不重写内部源代码的情况下缩放 SVG？答案

【问题标题】：How to scale SVG without rewriting inner source code?如何在不重写内部源代码的情况下缩放 SVG？
【发布时间】：2020-08-29 02:42:33
【问题描述】：

在 Vue SFC 中，我有一个名为 svg 的道具，其中包含 SVG 标记字符串 <svg>...</svg>。

如何绘制和缩放？

【问题讨论】：

在我写答案时，问题似乎发生了很大变化。我不清楚编写{{svg}} 将如何绘制 SVG，我希望它将 SVG 的源代码输出为文本。您能否附上minimal reproducible example 来澄清问题？
@skirtle 你是对的。我通过硬编码<svg>标签而不是使用data()来测试我的代码，这是一个错误。

标签： javascript html vue.js svg vuetify.js

【解决方案1】：

有多种方法可以做到。

您可以使用v-html。这是将 HTML 字符串注入 Vue 模板的通用方式。不过，您需要确保源字符串是安全的，否则您将面临注入攻击。

文档：https://vuejs.org/v2/api/#v-html

另一种方法可能是使用data: URL，作为background-image 或src 的<img>。

文档：https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

下面的例子说明了这两种技术：

const DrawPicture = {
  template: `
    <div>
      <div v-html="svg"></div>
      <img :src="'data:image/svg+xml;utf8,' + encodeURIComponent(svg)">
    </div>
  `,
  
  props: ['svg']
}

new Vue({
  el: '#app',
  
  components: {
    DrawPicture
  },
  
  data () {
    return {
      circle: `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80">
          <circle cx="40" cy="40" r="40" fill="#f00" />
        </svg>
      `
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <draw-picture :svg="circle"></draw-picture>
</div>

对于data: URL，我使用encodeURIComponent 来确保URL 被正确转义。也可以将base64 与btoa 一起使用。

【讨论】：