javascript - 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>
解决方案
推荐阅读
- java - 为什么@Configuration 和@Service 在一起?我们得到了什么额外的东西?
- grails - Grails 嵌套的 URL 映射产生为 null
- typescript - 尽管 event.preventDefault (),为什么我的页面仍然重新加载?
- java - finishConnect(..) 失败:连接被拒绝:localhost/127.0.0.1,错误:Webflux、Webclient、Spring boot、java
- excel - 从另一个工作簿复制不太大的 Excel 表会导致定义范围出现问题
- node.js - 从 api 端点获取项目列表
- ssh - ssh 无法将本地文件复制到服务器
- java - 我安装了 JDK 并添加了路径变量,但我仍然面临 -> zsh : command not found: jdk in macOS
- javascript - 我需要一个令牌传递给 JS 中的不同函数,但它始终是未定义的。尝试回调但不确定如何实现
- html - 将线性背景颜色应用于 CSS 中的一组六边形