xml开头的SVG图片显示、去掉指定字符串、给＜v-html＞中的元素加style

最新推荐文章于 2024-05-26 09:57:04 发布

Program W

最新推荐文章于 2024-05-26 09:57:04 发布

阅读量643

点赞数

分类专栏： js Vue 大前端文章标签： css js vue

本文链接：https://blog.csdn.net/weixin_46037781/article/details/119184853

版权

大前端同时被 3 个专栏收录

89 篇文章 1 订阅

订阅专栏

Vue

64 篇文章 3 订阅

订阅专栏

49 篇文章 2 订阅

订阅专栏

一、首先去掉xml头部

获取xml文本需要设置responseType: 'text/xml'，才能让文本在data中显示
params: { instanceId }传递query(string)类型的参数
svg.replace(xml, ‘’)去掉xml

this.historyVisible = true
          const instanceId = '4d008137-ef51-11eb-b1bb-3ef01173f5be'
          this.$axios({
            methods: 'get', // 请求方法
            url: API_HOST + '/qn_biz/activiti/history/showImg', // 请求地址
            responseType: 'text/xml',
            params: {
              instanceId
            }
          }).then((response) => {
            const svg = response.data
            const xml = `<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
          'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>`
            this.bpmnSvg = svg.replace(xml, '')
            console.log('this.bpmnSvg', this.bpmnSvg);
          })

二、显示`<svg>`图片

直接使用{{bpmnSvg}}会导致直接显示文本字符串。

<div class="bpmnSvg" v-html="bpmnSvg" ></div>

三、在`<v-html>`的时候给内部的`<svg>`定义样式

在写样式的时候添加>>>

<style lang="scss" scoped>
  .bpmnSvg >>> svg {
            width: 90vw;/* 宽度  页面宽度的90% */
            height: 60vh;/* 高度  页面高度的60% */
            /* 容器自动水平居中 */
            margin: 0px auto;
            /* 实现垂直居中 距顶部高度  也可以写成 calc((100vh - 60vh)/2) */
            margin-top: 20vh;
  }

</style>