我正在尝试向SVG添加一些polyfill功能。为了做到这一点,我将一些javascript代码添加到SVG,在其中我创建一个canvas元素,在其上绘制,获取画布的dataURL并将其添加为SVG内的image
元素。以下是SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="297mm"
width="210mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg11346"
>
<script type="application/ecmascript"> <![CDATA[
var svg = document.querySelector('svg');
svg.onload = function () {
var canvas = document.createElementNS('http://www.w3.org/1999/xhtml','canvas');
canvas.width = 50;
canvas.height = 50;
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,50,50);
ctx.fillStyle = '#0f0';
ctx.fillRect(20,20,20,20);
var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttribute('xlink:href', canvas.toDataURL());
img.setAttribute('x',0);
img.setAttribute('y',0);
img.setAttribute('width',50);
img.setAttribute('height',50);
svg.appendChild(img);
};
]]> </script>
<rect
style="fill:#f00;fill-opacity:1;"
id="rect11482"
width="100"
height="100"
x="200"
y="0" />
</svg>
使用此代码,我希望在红色SVG rect元素旁边的左上角附近看到一个小的绿色矩形。但是当我在Chrome或Firefox中加载此SVG时,我看不到它。但是,当我检查DOM时,我发现image
标记已添加到svg元素中。当我将它悬停在Devtools上时,我可以在页面上看到一个突出显示的矩形。这意味着image
元素已添加,但未呈现。
要验证画布图是否正常工作,我从开发工具复制了image
,然后手动将其插入SVG文件,禁用脚本代码并在浏览器中重新加载SVG。我可以看到预期的绿色矩形。
这告诉我,在动态插入图像元素之后,SVG实现可能不会刷新文档的渲染。我试图从脚本中动态插入一个原生的SVG元素(圆圈)并且显示正确。所以它可能只与图像元素有关。
有什么想法?我可以做些什么来触发重绘吗?有没有其他方法可以在SVG中显示动态生成的画布内容?
答案 0 :(得分:1)
NameSpaced属性需要setAttributeNS
(至少在SVG1.1中),xlink:href
就是其中之一。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="297mm"
width="210mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg11346"
>
<script type="application/ecmascript"> <![CDATA[
var svg = document.querySelector('svg');
var canvas = document.createElementNS('http://www.w3.org/1999/xhtml','canvas');
canvas.width = 50;
canvas.height = 50;
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,50,50);
ctx.fillStyle = '#0f0';
ctx.fillRect(20,20,20,20);
var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', canvas.toDataURL());
img.setAttribute('x',0);
img.setAttribute('y',0);
img.setAttribute('width',50);
img.setAttribute('height',50);
svg.appendChild(img);
]]> </script>
<rect
style="fill:#f00;fill-opacity:1;"
id="rect11482"
width="100"
height="100"
x="200"
y="0" />
</svg>