vue使用svg的问题

vue使用svg

做的一个可视化大屏项目中需要引入svg, 直接绑定svg元素的某些值，在ui给的svg中出现了style标签用作svg的样式,然后就会报错。结果查阅资料知道了两个解决方法.

方法1：
将svg中的style标签修改为<svg:style></svg:style>。实例如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612.94 281.64" class="my-svg"><svg:style type="text/css">.cls-1{font-size:26px;font-family:JLinXin, JLinXin;}.cls-1,.cls-4,.cls-5,.cls-6,.cls-9{fill:aqua;}.cls-2,.cls-3{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:20px;}</svg:style>

方法2跟ui沟通让其用ai导出svg的时候选择样式属性，这样svg中就不会出现<style></style>标签，不过svg文件会相应的变大，不过影响可以忽略不记。

stackoverflow传送门

vue使用svg的问题相关推荐

vue中svg转png下载
vue中svg转png下载 <template><div><button @click="downloadPng">change</but ...
基于VUE的SVG动画处理（一）
基于VUE的SVG动画处理(一) 提示:涉及vue.photoshop.svg动画一.创建SVG文件方法一:使用photoshop绘制所需接线图,导出svg格式. 第一种:快速导出SVG编辑-&g ...
基于vue和svg的树形UI
基于vue和svg的树形UI vue-svg-tree 基于vue和svg的动态树形UI 截图应用 npm install vue-svg-tree 示例 <template><d ...
基于vue的svg画线_基于SVG的Vue图组件库
基于vue的svg画线图表 (diagram-vue) A vue component library of diagrams. Vue组件图库. View Demo 查看演示 Download S ...
使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
vue引入svg图片
一.很早之前做项目有使用到svg图片,一直没有记录,后来在百度发现没一个能用的,索性自己整理归纳一个二.步骤 1.安装 svg-sprite-loader npm install --save s ...
vue使用 svg图片以及修改svg图片颜色
一.如何使用svg 1.创建svg专用文件夹,里面只存放svg图片 2. 创建SvgIcon组件 <template><div v-if="isExternal" ...
vue使用svg画拓扑图（关系图）拖拽缩放
概述项目刚开始用的echarts画的拓扑图,echarts有个关系图可以直接画出来,但是上个前端在拖拽功能上留了bug,我眼睛都快看瞎了,都没找出来哪里出问题,还找了各种文章借鉴学习都没搞定后来跑 ...

vue使用svg的问题

vue使用svg

vue使用svg的问题相关推荐

最新文章

热门文章