vue.js - 在 Vue 组件中将样式元素添加到 SVG

Question

我正在编写一个动态呈现 SVG 的 Vue 组件。通常<style> Vue 模板中不允许使用标签，但在这种特定情况下有什么方法可以允许它吗？

以下将引发错误，或生成 不带 style 标签的 svg，具体取决于您的项目设置方式 (Code Sandbox):

<template>
  <svg :width="svgWidth" :height="svgHeight">
    <style>rect{fill:red}</style>
    <rect :height="rectHeight" :width="rectWidth" />
  </svg>
</template>

一个明显的解决方法是对所有元素使用内联样式，但为了方便起见，我想知道是否可以告诉 Vue 将样式标签留在 svg 中。单独标记？(我正在动态生成样式和 SVG 元素，因此它会产生更易读的代码和一个更小的渲染 SVG 元素。)

我想让 SVG 独立，即将样式标签保留在呈现的图像内部。

Answer 1

使用<style>带有 svgs 的标签，你可以在它们前面加上 svg: .

工作示例:

<template>
  <svg width="100" height="100">
    <svg:style>rect{fill:red;}</svg:style>
    <svg:rect width="20" height="30" />
  </svg>
</template>

请注意，我更改了您的 rect 的属性因为它显示一个空的 (0x0) 矩形。