F1V3.0-图形-svg渲染效果在chrome下失效解决方法

解决方法

方法 一

将静态化脚本中的一行脚本注释掉，如下：

document.writeln("<base href='"+getRootPath()+"'/>");

即

<script type="text/javascript"> 
   function getRootPath() {
       var pathName = window.location.pathname.substring(1);
       var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
       //return window.location.protocol + '//' + window.location.host + '/'+ webName + '/';
       return window.location.protocol + '//' + window.location.host + '/'+ webName+'/';
   }
   // 注释掉，影响svg动画效果
   //document.writeln("<base href='"+getRootPath()+"'/>");
</script>

方法 二

修改动画的xlink:href属性：location.href+”#”+引用元素id

<svg width="500" height="350" viewBox="0 0 550 350">
  <path id="motionPath-2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
    c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
    c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
    c1.9-2.1,3.7-5.5,6.5-6.5"/>
  <circle id="circle-2" r="20" cx="100" cy="100" fill="tomato" />

  <animateMotion
           xlink:href="#circle-2"
           dur="1s"
           begin="click"
           fill="freeze">
    <mpath xlink:href="http://192.168.1.28:8082/f1/demo.html#motionPath-2" />
  </animateMotion>
</svg>

显示正常

## 二 原因 在做静态化处理时会加入如下脚本：

document.writeln("<base href='"+getRootPath()+"'/>");

<base> 标签为页面上的所有链接规定默认地址或默认目标。 通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

svg里面的元素如果有用url的滤镜、模糊、动画等效果，受<base>影响，svg元素标签中的url将会改变，导致各种效果失效。