单击时加载新的 SVG

Load a new SVG on click

本文关键字：SVG 加载 单击      更新时间：2023-09-26
多年来

一直在网站上潜伏和搜索，但我遇到了一个我似乎无法弄清楚的问题。

我正在为我的女儿制作一本（非常简单的）图画书。 我已经能够确定单张图片 （SVG） 的颜色。 我试图给她多张图片上色。 当她单击主画布下方的图像时，在div 中加载新的 SVG、路径和所有内容的最佳方法是什么？我已经将 SVG 代码内联并使用 PHP 调用它。 两者都适用于初始页面加载，但我无法让辅助加载工作。

这是我的尝试 - https://jsfiddle.net/shockey8oz/LL9048kg/

$('.thumb').click(function() {
   var choice = $(this).attr('id');
   $('.canvas').load('http://www.shockeyfamily.org/final/' + choice + '.svg');
});

谢谢冲击8盎司

  $('.thumb').click(function() {
  var img = new Image();
img.onload = function() {
var can = document.createElement('canvas');
var ctx = can.getContext('2d');
    ctx.drawImage(img, 0, 0);
    $('.canvas').html(can.innerHTML);
}
   var choice = $(this).attr('id');
img.src ='http://www.shockeyfamily.org/final/' + choice + '.svg';
});

首先，测试此处找到的解决方案：使用 SVG 图像的最佳实践？

更新代码以在两个不同的形状之间切换。如果图像存储在另一台服务器上，则必须阅读 CORS 并重新配置图像服务器的Access-Control-Allow-Origin:设置。

替代解决方案是使用内联方法：如何在我的网站上填充/描边 SVG 文件？

相关文章：