时间戳

首页 > 解决方案 > 在 Vue 组件中向 SVG 添加样式元素

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

问题描述

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

以下将引发错误或生成不带样式标记的 svg，具体取决于您的项目的设置方式（代码沙箱）：

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

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

我想让 SVG 自包含，即将样式标签保留在渲染图像中。

标签： vue.jssvg

解决方案

要将<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) 矩形。

推荐阅读