Question

此页面显示一个具有三个笔划的SVG。单击另存为PNG按钮将SVG转换为PNG。这很有效。

http://www.holisticedu.us/wechat/three.htm

单击SVG的笔划会将笔触颜色从背面更改为红色。然后单击“另存为PNG”按钮，PNG的加油颜色不会改变。我不知道这个。我想要在改变SGV的笔触颜色时也可以改变PNG的笔触颜色。

以下是我的代码，感谢您的任何建议。

<!DOCTYPE html><html xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"><head><meta charset="utf-8"/>
<title>three</title>

<script type="text/javascript">

function changeRectColor(evt) {  
evt.target.setAttributeNS(null,"fill","red");
}

</script>

</head><body>



<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="250" height="250" viewBox="0 0 2052 2052">

<def>
<g id="g1" onclick="changeRectColor(evt)" name="三" transform="translate(514 718) matrix(1 0 0 -1 0 616)">
<path name="1.1" onclick="changeRectColor(evt)" d="M677 619Q699 619 733 602Q756 592 756 577Q756 566 726 559Q691 548 572 530Q390 505 335 505Q284 505 264 517Q244 531 244 541Q244 550 288 552Q390 561 513 583Q599 597 652 613Q671 619 677 619Z"/>
<path name="1.2" onclick="changeRectColor(evt)" d="M645 343Q667 343 701 326Q724 316 724 301Q724 293 700 288Q672 280 575 267Q428 249 383 249Q332 249 312 261Q292 275 292 285Q292 292 328 293Q411 300 512 316Q582 327 625 338Q640 343 645 343Z"/>
<path name="1.3" onclick="changeRectColor(evt)" d="M852 104Q860 104 914 84Q960 59 960 39Q960 21 897 21Q816 23 722 23Q623 23 465 12Q351 7 222 -19Q185 -27 177 -27Q156 -27 115 -9Q72 10 72 21Q72 36 100 38Q244 39 311 51Q438 65 591 73Q735 85 811 99Q844 104 852 104Z"/>
</g>
</def>


<g id="bg" transform="translate(514 718)">
<rect id="sq" style="fill:none;stroke:lightgray;stroke-width:4" x="-512" y="-716" width="0" height="0"/>
<g id="box"><rect style="fill:none;stroke:black;stroke-width:4" x="0" y="-204" width="1024" height="1024"/>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="0" y1="308" x2="1024" y2="308"/>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="512" y1="-204" x2="512" y2="820"/>
</g></g>
<use id="u1" xlink:href="#g1" x="0" y="0"/>

</svg>


<button><font size = 4>Save as PNG</font></button>

<canvas id="he_canvas" width="250" height="250"></canvas>


<script type="text/javascript">

var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('he_canvas');


function triggerDownload (imgURI) {


  var evt = new MouseEvent('click', {
    view: window,
    bubbles: false,
    cancelable: true
  });
var a = document.createElement('a');  
a.setAttribute('download', 'mypng.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');

a.dispatchEvent(evt);
}




btn.addEventListener('click', function () {
var canvas_browser = document.getElementById('he_canvas');
var ctx = canvas_browser.getContext('2d');

var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);


img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);

var imgURI = canvas_browser
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');

triggerDownload(imgURI);
};

img.src = url;
});

</script>

</body></html>

Answer 1

重要提示：

这个问题是由一个只在Firefox中实现的行为引起的，所以这个答案的第一部分将假设从Firefox中看到。

这是一个有趣的案例......

所以你要做的是通过<use>元素处理克隆节点上的点击事件。

evt.target.setAttributeNS(null,"fill","red");

在这里，evt.target将是克隆节点，而不是原始节点，您可以通过克隆两次元素来检查它：

＆＃13;

<script>
function changeRectColor(evt) {
     evt.target.setAttributeNS(null,"fill","red");
    }
</script>
<svg width="500" height="250" viewBox="0 0 4104 2052">

<def>
<g id="g1" onclick="changeRectColor(evt)" name="三" transform="translate(514 718) matrix(1 0 0 -1 0 616)">
<path name="1.1" onclick="changeRectColor(evt)" d="M677 619Q699 619 733 602Q756 592 756 577Q756 566 726 559Q691 548 572 530Q390 505 335 505Q284 505 264 517Q244 531 244 541Q244 550 288 552Q390 561 513 583Q599 597 652 613Q671 619 677 619Z"></path>
<path name="1.2" onclick="changeRectColor(evt)" d="M645 343Q667 343 701 326Q724 316 724 301Q724 293 700 288Q672 280 575 267Q428 249 383 249Q332 249 312 261Q292 275 292 285Q292 292 328 293Q411 300 512 316Q582 327 625 338Q640 343 645 343Z"></path>
<path name="1.3" onclick="changeRectColor(evt)" d="M852 104Q860 104 914 84Q960 59 960 39Q960 21 897 21Q816 23 722 23Q623 23 465 12Q351 7 222 -19Q185 -27 177 -27Q156 -27 115 -9Q72 10 72 21Q72 36 100 38Q244 39 311 51Q438 65 591 73Q735 85 811 99Q844 104 852 104Z"></path>
</g>
</def>

<g id="bg" transform="translate(514 718)">

<rect id="sq" style="fill:none;stroke:lightgray;stroke-width:4" x="-512" y="-716" width="0" height="0"></rect>
<g id="box"><rect style="fill:none;stroke:black;stroke-width:4" x="0" y="-204" width="1024" height="1024"></rect>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="0" y1="308" x2="1024" y2="308"></line>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="512" y1="-204" x2="512" y2="820"></line>
</g></g>
<use id="u1" xlink:href="#g1" x="0" y="0"></use>
<use id="u2" xlink:href="#g1" x="1026" y="0"></use>

</svg>

＆＃13;

正如您所看到的，只有克隆的一个被修改，但是这个克隆的一个不能从DOM访问（它只在一些shadow-DOM中），因此，当您解析SVG元素以从中创建新图像时它，您无法解析对这些克隆节点所做的更改。

解决方案

不要使用<use>元素...而是直接显示原始节点无论如何，如前所述，只有Firefox会处理<use>元素内的克隆节点上的点击事件。

＆＃13;

var btn = document.querySelector('button');
var svg = document.querySelector('svg');

btn.addEventListener('click', function () {
var canvas_browser = document.createElement('canvas');
var ctx = canvas_browser.getContext('2d');

var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);

img.onload = function () {
canvas_browser.width = img.width;
canvas_browser.height = img.height;
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
document.body.appendChild(canvas_browser)
};

img.src = url;
});

＆＃13;

<button>download</button><br>
<script>
function changeRectColor(evt) {   
     evt.target.setAttributeNS(null,"fill","red");
    }
</script>
<svg width="250" height="250" viewBox="0 0 2052 2052">

<g id="bg" transform="translate(514 718)">

<rect id="sq" style="fill:none;stroke:lightgray;stroke-width:4" x="-512" y="-716" width="0" height="0"></rect>
<g id="box"><rect style="fill:none;stroke:black;stroke-width:4" x="0" y="-204" width="1024" height="1024"></rect>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="0" y1="308" x2="1024" y2="308"></line>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="512" y1="-204" x2="512" y2="820"></line>
</g></g>
<g id="g1" onclick="changeRectColor(evt)" name="三" transform="translate(514 718) matrix(1 0 0 -1 0 616)">
<path name="1.1" onclick="changeRectColor(evt)" d="M677 619Q699 619 733 602Q756 592 756 577Q756 566 726 559Q691 548 572 530Q390 505 335 505Q284 505 264 517Q244 531 244 541Q244 550 288 552Q390 561 513 583Q599 597 652 613Q671 619 677 619Z"></path>
<path name="1.2" onclick="changeRectColor(evt)" d="M645 343Q667 343 701 326Q724 316 724 301Q724 293 700 288Q672 280 575 267Q428 249 383 249Q332 249 312 261Q292 275 292 285Q292 292 328 293Q411 300 512 316Q582 327 625 338Q640 343 645 343Z"></path>
<path name="1.3" onclick="changeRectColor(evt)" d="M852 104Q860 104 914 84Q960 59 960 39Q960 21 897 21Q816 23 722 23Q623 23 465 12Q351 7 222 -19Q185 -27 177 -27Q156 -27 115 -9Q72 10 72 21Q72 36 100 38Q244 39 311 51Q438 65 591 73Q735 85 811 99Q844 104 852 104Z"></path>
</g>
</svg>

＆＃13;

SVG的更改无法反映到PNG上

1 个答案:

重要提示：

解决方案