渲染svg到外层dom

需求

接口请求到的svg路径，想要渲染到页面，并根据不同状态切换颜色

思路

直接渲染svg到<img>本质是转了base64，被写死了，不能满足换色需求
请求svg资源，读取xml内容，通过外层dom的innerHTML写入，避免了使用<embed>,<object>,<iframe>无法到达内部节点的问题

操作

• svg内部 fill 属性不要写死。
  查找g标签中有没有写具体的fill值，如果是颜色值(如 #aaa #aaaaaa rgba(…) rgb(…) )，则改成currentColor, 这个 变量 会根据继承父节点color值，具体可自行搜索
  fill=“currentColor”
  例如：
  <g id="快捷入口" transform="translate(-1315.000000, -762.000000)" fill="#dddddd" fill-rule="nonzero">
  改成
  <g id="快捷入口" transform="translate(-1315.000000, -762.000000)" fill="currentColor" fill-rule="nonzero">
  这样可以通过切换外层dom的color属性直接影响该svg底色
• 服务端图片内容
  aa.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <title>快捷入口</title>
   <g id="页面-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g id="快捷入口" transform="translate(-1315.000000, -762.000000)" fill="currentColor" fill-rule="nonzero">
           <g id="编组-26" transform="translate(1304.000000, 752.000000)">
               <g id="快捷入口" transform="translate(11.000000, 10.000000)">
                   <path d="M8.46154922,15.6074429 L8.46154922,8.00000309 L7.19358775,8.00000309 L7.19358775,15.6074429 L5.42291527,13.8618183 L4.52640289,14.7455988 L7.82756588,18.0000031 L11.1287289,14.7455988 L10.2322165,13.8618183 L8.46154922,15.6074429 Z M11.5891789,10.3925602 L11.5891789,18 L12.8571403,18 L12.8571403,10.3925602 L14.6278128,12.1381848 L15.5243252,11.2544043 L12.2231622,8 L8.92199922,11.2544043 L9.81851159,12.1381848 L11.5891789,10.3925602 Z M9.99998945,0 C7.08145738,0 4.67774897,2.15926463 4.33245637,4.9443026 C1.91406048,5.10245844 0,7.08155926 0,9.50624806 C0,12.0341028 2.07866968,14.0833276 4.64284667,14.0833276 L4.64284667,12.6749929 C2.87038369,12.6749929 1.42857271,11.2535959 1.42857271,9.50624998 C1.42857271,7.84624659 2.74553617,6.45921515 4.42731955,6.34988773 L5.60685346,6.27218286 L5.75053183,5.11484875 C6.01281671,3.00164104 7.83898665,1.40832583 10,1.40832583 C12.1609938,1.40832583 13.9871833,3.00164489 14.2494291,5.11481024 L14.3931075,6.27214435 L15.5726414,6.34984922 C17.2544619,6.45920629 18.5714273,7.84623888 18.5714273,9.50624998 C18.5714273,11.2536056 17.1296065,12.6749929 15.3571533,12.6749929 L15.3571533,14.0833276 C17.9213303,14.0833276 20,12.0341028 20,9.50624806 C20,7.08155926 18.0859298,5.10245959 15.6675436,4.9443026 C15.3222377,2.15924537 12.9185215,0 9.99998945,0 Z" id="形状"></path>
               </g>
           </g>
       </g>
   </g>
</svg>

代码

html

<el-button
   size="mini"
   type="primary"
   @click="svgCls = 'add-red'"
 >
   换红色
 </el-button>
 <el-button
   size="mini"
   type="primary"
   @click="svgCls = 'add-green'"
 >
   换绿色
 </el-button>
<div
id="svgDiv"
  class="svg-dom"
  :class="svgCls"
/>

js

methods() {
  async getImageUrl(currentRow1) {
    //         请求路径，返回http前缀的完整路径，不同域
    const res = await fetch.get('/rcs/manage/rcs/holdModel/getIconPath?attachmentCode=' + currentRow1.attachmentCode) || {};
    var url = res.data; // 字符串'http://域名/aa.svg'
    var request = new XMLHttpRequest();
  
    function state_change() {
      if (request.status==200) {
        var dom = document.getElementById("svgDiv");
        dom.innerHTML = request.response;
      }
    }
    request.onreadystatechange = state_change;
  
    request.open("GET", url, true);
    // request.setRequestHeader("Accept","application/xhtml+xml,application/xml");
    request.send(); // 发出请求
  }
}

css

.svg-dom {
  svg {
    width: 100%;
  }
  &.add-red {
    color: red;
  }
  &.add-green {
    color: green;
  }
}