происходит событие загрузки, когда SVG загружается как src для элемента img? - PullRequest
0 голосов
/ 20 июня 2019

В этом файле:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   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"
   version="1.1"
   id="svg2"
   height="40.2271"
   width="25.1">
  <rect
     style="fill:red"
     id="rect44"
     width="12.625"
     height="14.5"
     x="6.3289919"
     y="4.5130124" />
</svg>

событие загрузки запускается, когда файл загружается как отдельный файл, но при загрузке в качестве изображения здесь:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
  <title>test</title>
</head>
<body>
  <img src="marker_so.svg">
</body>
</html>

это не такогонь больше.

Почему это?и есть ли способ вызвать событие внутри файла SVG при загрузке в виде изображения?

В моем случае я пытаюсь запустить функцию, которая изменяет некоторые цвета внутри SVGфайл на основе URL, с которого он был загружен.

1 Ответ

0 голосов
/ 20 июня 2019

прослушивание события загрузки изображения в SVG:

<image xlink:href="example.png" width="10" height="10" 
       onload="alert('loaded')"/>

<script>
  var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
  img.addEventListener('load', function() { alert('loaded'); });
  // or alternatively:
  // img.onload = function() { alert('loaded'); }
  img.width.baseVal.value = 100;
  img.height.baseVal.value = 100;
  img.href.baseVal = "example.png";
</script>

Пример: http://jsfiddle.net/ZXdxc/81/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...