将SVG过滤器应用于HTML5画布？
目标：使用html5和JavaScript对视频应用CSS过滤器 限制：解决方案必须与Internet Exporer 10（适用于Windows 8）兼容。我真的在做地铁应用 到目前为止： 我有一个将SVG过滤器应用于HTML5画布？,html,internet-explorer,canvas,svg,windows-runtime,Html,Internet Explorer,Canvas,Svg,Windows Runtime,目标：使用html5和JavaScript对视频应用CSS过滤器 限制：解决方案必须与Internet Exporer 10（适用于Windows 8）兼容。我真的在做地铁应用 到目前为止： 我有一个，我正在泵入一个。我原以为我可以直接将CSS过滤器应用于此（例如，反转或亮度），但事实证明这些过滤器与IE10不兼容 想法：我希望找到一种将SVG过滤器应用于画布的方法。这可能吗？是否需要将复制到并对其应用过滤器？或者，是否应该有一种方法将画布包装成 谢谢你的帮助！ 下面是一些代码供感兴趣的人使用：
反转亮度<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
</filter>
</defs>
</svg>
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<canvas class="a" style="width: 180px;height:180px;margin-bottom: -5px;" data-win-bind="style.backgroundColor: bc; id: effectId" />
</div>
<html>
<head>
</head>
<body>
<svg id="svgroot" viewbox="0 0 800 800" width="800" height="800" preserveAspectRatio="xMidYMin">
<defs>
<filter id="myHueRotate">
<feColorMatrix type="hueRotate" values="270"/>
</filter>
</defs>
<image id="a" filter="url(#myHueRotate)" x="0" y="0" width="300" height="300" />
<image id="b" filter="url(#myHueRotate)" x="300" y="0" width="300" height="300" />
<image id="c" filter="url(#myHueRotate)" x="0" y="300" width="300" height="300" />
<image id="d" filter="url(#myHueRotate)" x="300" y="300" width="300" height="300" />
</svg>
<canvas id="canvas" height="300" width="300"></canvas>
<video id="vid" src="movie.m4v" height="300" width="300" style="display: none" autoplay/>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'img.jpg';
img.onload = function(){
//ctx.drawImage(img,0,0);
//var canvasImage = canvas.toDataURL("image/png");
//var svgImage = document.getElementById('a');
//svgImage.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
draw();
}
img.load();
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
var vid = document.getElementById('vid')
ctx.drawImage(vid,0,0,300,300);
var canvasImage = canvas.toDataURL("image/png");
document.getElementById('a').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
document.getElementById('b').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
document.getElementById('c').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
document.getElementById('d').setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", canvasImage);
setTimeout(draw,40);
}
</script>
</body>
</html>
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var img=新图像（）；
img.src='img.jpg'；
img.onload=函数（）{
//ctx.drawImage（img，0,0）；
//var canvasImage=canvas.toDataURL（“image/png”）；
//var svgImage=document.getElementById（'a'）；
//svgImage.setAttributeNS（“http://www.w3.org/1999/xlink“，“xlink:href”，画布图像）；
draw（）；
}
img.load（）；
函数绘图（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
var vid=document.getElementById（'vid'）
ctx.drawImage（视频，0,0300）；
var canvasImage=canvas.toDataURL（“image/png”）；
document.getElementById（'a'）.setAttributeNS（'http://www.w3.org/1999/xlink“，“xlink:href”，画布图像）；
document.getElementById（'b'）.setAttributeNS（'http://www.w3.org/1999/xlink“，“xlink:href”，画布图像）；
document.getElementById（'c'）.setAttributeNS（'http://www.w3.org/1999/xlink“，“xlink:href”，画布图像）；
document.getElementById（'d'）.setAttributeNS（'http://www.w3.org/1999/xlink“，“xlink:href”，画布图像）；
设置超时（抽签，40）；
}
invert#yourTargetElement {
filter: DXImageTransform.Microsoft.BasicImage(invert=1);
}
defs
#你的目标元素{
过滤器：url（#过滤器图片）；
}
我之所以要提醒它们看起来有多“简单”，是因为它们是通过js和一个交互表单添加样式的（也许你也有同样的想法），但我认为这与在DOM中调用脚本中的元素的风险相同，因为它找不到过滤器并抛出错误。因此，如果您希望保持简单（非动态）并且事情仍然不起作用，请确保尝试将过滤器/svg置于样式之上（即使这会导致闪烁）。而不是将
toDataURL（）#yourTargetElement {
filter: DXImageTransform.Microsoft.BasicImage(invert=1);
}
<div id="svg_wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 800 533" preserveAspectRatio="xMidYMin">
<defs>
<filter id="filtersPicture">
<feComposite operator="arithmetic" k1="0" k2="1" k3="0" k4="0"
in="SourceGraphic" in2="SourceGraphic" result="inputTo_6">
</feComposite>
<feColorMatrix type="saturate" id="filter_6" values="2"
data-filterId="6">
</feColorMatrix>
</filter>
</svg>
</div>
<style type="text/css">
#yourTargetElement{
filter:url(#filtersPicture);
}
</style>