javascript - SVG 的更改无法反射(reflect)到 PNG 上-6ren

javascript - SVG 的更改无法反射(reflect)到 PNG 上

转载作者：太空宇宙更新时间：2023-11-04 15:56:39

此页面显示具有三个笔画的 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>

最佳答案

重要说明:

这个问题是由仅在 Firefox 中实现的行为提出的，因此该答案的第一部分将假设可以从 Firefox 中看到。

<小时/>

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

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

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

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

<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>

正如你所看到的，只有克隆的元素被修改，但是这个克隆的元素无法从 DOM 访问(它仅存在于某些 Shadow-DOM 中)，因此，当你解析 SVG 元素以从中创建新图像时它，您将无法解析对这些克隆节点所做的更改。

解决方案

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

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;
});

<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>

关于javascript - SVG 的更改无法反射(reflect)到 PNG 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42639361/

文章推荐： php - 仅用于发布的模板

文章推荐： c++ - 为什么我在编译模板类时遇到问题？

文章推荐： Css，文本阴影 - 如何让它溢出 div

png - PNG 是存储图片最经济的文件格式吗？
我正在寻找一种经济合理的解决方案来长时间存储图片。我读到 PNG 文件格式，它与 JPEG 相比具有优越的特性，即在这些类别中: 无专利、无许可、无版税无质量损失尚未压缩我有很多来自 Photo
png - 加载动画 png
关闭。这个问题是off-topic .它目前不接受答案。想改善这个问题吗？ Update the question所以它是 on-topic对于堆栈溢出。 9年前关闭。 Improve this q
android - 如何从 background.png 和 *.png 中的图像列表(每个 image001.png、image002.png)创建视频？
我怎么能用 FFMEG 做到这一点？输入 : 背景图片:background.png 图片帧列表:image_001.png,image_002.png ...(每张图片为一帧) 输出:所有帧都有背
linux - 为什么 grep -vFf png.ll png.lll 不同于 grep -vFf png.lll png.ll？
$ cat png.ll ./packages/apps/Mms/res/mipmap-hdpi/ic_launcher_smsmms.png ./packages/apps/Mms/res/draw
c# - foreach 按文件索引顺序遍历文件(file1.png、file2.png、file10.png)
这个问题在这里已经有了答案: Natural Sort Order in C# (18 个答案) 关闭 7 年前。这是我的代码: private void Method1() { int
android - 当我们可以从任何 png 转换器获得较小尺寸的 PNG 时，是否值得将 PNG 转换为 WEBP
我一直在考虑用 Webp 图像替换我的 Android 应用程序中的 png 文件以减小 APK 大小。虽然结果不错，但我想知道我是否使用了一些 png 转换器/压缩器，并且能够将尺寸减小到比我为
png - gnuplot png 白底黑字
在 gnuplot-4.2.6 中，我可以使用 set term png medium x000000 xffffff set output 'file.png' plot x 这将生成一个带有黑色背
png - 是什么让我的 png 膨胀？
背景: 我正在努力使一堆 PNG 尽可能小。我正在使用诸如 PngOut、PngCrush 和 OptiPng 之类的工具。问题: 我遇到了一个大小为 1434 KB 但只有 230 x 230 像
png - ImageMagick PNG 调整大小会增加文件大小
我正在使用 ImageMagick 调整图像大小。如果我传递 -resize WxH 选项，它会按预期运行。但是如果我通过 -resize WxH! (在调整大小时忽略纵横比)，一些图像，尤其是 PN
png - 访问 PNG 元数据
如何访问/删除 PNG 元数据？我正在寻找 Mac 应用程序或 PHP 代码段。最佳答案抱歉发布了一个 Windows 软件，但如果你没有找到任何对 MAC 有用的东西，那就是 TweakPNG
png - 从 png 文件中获取文本字段
到目前为止似乎没有任何效果。我看到了 pnginfo以下消息: concept_Sjet_dream6.png... Image Width: 200 Image Length: 240 Bi
png - 将 PNG 图像中的透明度替换为白色背景
我有一个带有 Alpha channel (即透明度)的 PNG 图像，我需要创建将图像层合成到白色背景上的版本。我想使用可编写脚本的命令，使用 CLI 工具(例如 Image Magick)将 PN
png - 带有 alpha png 的 24 位与 32 位 png 相同吗？
我是初学者。我昨天问了一个类似的问题，但不知何故被否决了。所以这次我尽量简化问题。带有 alpha png 的 24 位与 32 位 png 相同吗？非常感谢您的一些提示。最佳答案没有“24
r - 使用 pdftools 包和 png 包将 pdf 转换为 png 图像给出不完整的 png
我有这个带点的荷兰 pdf 图像: pdf image of the netherlands with dots 当我尝试将此 pdf 转换为 png 图像时，使用 pdftools和 png像这样:
iphone - iPhone/iPad通用应用程序如何正确添加这三个文件?"Default.png, Default-568h@2x.png, Default@2x.png"？
我在我的启动图像通用项目中添加了“Default.png，Default-568h@2x.png，Default@2x.png”这三个文件，我有三个不同的图像，分辨率与苹果中提到的完全相同文档，适用于
google-app-engine - 提供内容类型为 "image/png"而非 "image/x-png"的静态 PNG 文件
我在 Python 中使用 google app engine 并有几个静态 .png 图像文件，但它们都以“image/x-png”内容类型提供。这是一个问题，当我使用像 chrome 这样的浏览器
ffmpeg png 到 png 质量损失
我做了一个 python 脚本，该脚本设法根据特定模式解散乱序(png)图像，该 python 脚本使用 ffmpeg 并进行 12 次编码来解乱它(通过裁剪特定部分并将其粘贴到现有图片上)。因此，
png - 如何将 png 转换为 geotiff？
我有一个 PNG 图像文件。我想将其转换为 GeoTiff。我安装了 QGIS 软件，但无法使用它，也不知道如何对图像进行地理配准。请帮我。有没有在线软件？最佳答案这是一个非常好的教程，其中包含有
png - 为 PNG 文件设置 DPI
我有一堆使用我编写的 Java 图表工具创建的图表 - 它们主要是黑白图表，带有浅绿色的块，偶尔还有其他颜色。它们当前被保存为 JPG 文件，我想将它们插入到我准备按需打印的书中。这本书是一个 Op
png - 如何检测是否使用 PhotoShop 编辑了 PNG？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城