首页 > 解决方案 > Internet Explorer 使用 javascript 设置 filter="url(...)" 属性:添加额外引号

问题描述

我目前正在尝试在 Internet Explorer 10-11 中添加filter="url(...)"属性作为svg后备。但是,当我这样做时,浏览器(IE)显然添加了额外的引号,使属性如下所示并使其无效:

filter="url("#shadow")"

仅在将外部引号用作单引号时才会出现相同的问题,例如:filter='url(#shadow)'- 然后再次导致:filter="url("#shadow)")"

有什么解决方法吗?

复制示例如下所示:

$(document).ready(function(){
  $("#icon").attr("filter", 'url(#shadow)');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
<defs>
<filter id="shadow" height="130%" width="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur>
  <feOffset dx="3" dy="3" result="offsetblur"></feOffset>
  <feFlood flood-color="red" flood-opacity="1"></feFlood>
  <feComposite in2="offsetblur" operator="in"></feComposite>
  <feMerge>
  <feMergeNode></feMergeNode>
  <feMergeNode in="SourceGraphic"></feMergeNode>
  </feMerge>
 </filter>
 </defs>
 </svg>
<svg id="icon" viewBox="0 0 16 28" width="100px" height="100px">
<path d="M11.5 9c0 0.266-0.234 0.5-0.5 0.5s-0.5-0.234-0.5-0.5c0-1.078-1.672-1.5-2.5-1.5-0.266 0-0.5-0.234-0.5-0.5s0.234-0.5 0.5-0.5c1.453 0 3.5 0.766 3.5 2.5zM14 9c0-3.125-3.172-5-6-5s-6 1.875-6 5c0 1 0.406 2.047 1.062 2.812 0.297 0.344 0.641 0.672 0.953 1.031 1.109 1.328 2.047 2.891 2.203 4.656h3.563c0.156-1.766 1.094-3.328 2.203-4.656 0.313-0.359 0.656-0.688 0.953-1.031 0.656-0.766 1.062-1.813 1.062-2.812zM16 9c0 1.609-0.531 3-1.609 4.188s-2.5 2.859-2.625 4.531c0.453 0.266 0.734 0.766 0.734 1.281 0 0.375-0.141 0.734-0.391 1 0.25 0.266 0.391 0.625 0.391 1 0 0.516-0.266 0.984-0.703 1.266 0.125 0.219 0.203 0.484 0.203 0.734 0 1.016-0.797 1.5-1.703 1.5-0.406 0.906-1.313 1.5-2.297 1.5s-1.891-0.594-2.297-1.5c-0.906 0-1.703-0.484-1.703-1.5 0-0.25 0.078-0.516 0.203-0.734-0.438-0.281-0.703-0.75-0.703-1.266 0-0.375 0.141-0.734 0.391-1-0.25-0.266-0.391-0.625-0.391-1 0-0.516 0.281-1.016 0.734-1.281-0.125-1.672-1.547-3.344-2.625-4.531s-1.609-2.578-1.609-4.188c0-4.25 4.047-7 8-7s8 2.75 8 7z"></path>
</svg>

标签: javascriptinternet-explorersvg-filters

解决方案


推荐阅读