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将会改变，导致各种效果失效。