Как управлять элементами HTML из тега SVG - PullRequest
Новая
       33

Как управлять элементами HTML из тега SVG

0 голосов
/ 05 сентября 2018

Я новичок в файлах и тегах .svg. Я хочу сделать что-то простое, но после 2 дней траления в сети я не нашел именно то, что мне нужно. Пожалуйста, ПОМОГИТЕ.

У меня есть простой SVG-файл с изображением и кружком (id = кнопка) в качестве кнопки, которую я хочу щелкнуть и контролировать элемент HTML, в этом случае скрыть / показать div (id = test). Я пробовал команды SVG и .js, но все безуспешно. Кто-нибудь может помочь?! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Help Me </title>
</head>

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

    <image width="119" height="94" preserveAspectRatio="none"  
       xlink:href="data:image/png;
       base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAABeCAIAAACW+BwjAAAACXBIWXMAA
       A7EAAAOxAGVKw4bAAAA B3RJTUUH4gkFDSw6WnOjJQA............
      .............1-0.47656-1-1.059z" fill="#2b2810"/>

    <circle id="button" cx="65" cy="55" r="4" stroke="black"
       stroke-  width="3" fill="red" onclick="alert('click!')" />

  <script type="text/javascript"> 
    document.getElementById("test").hidden = true;
  </script>

</svg>

<div id="test">
   Hide/show me    Hide/show me  Hide/show me 
   Hide/show me  Hide/show me  Hide/show me 
   Hide/show me  Hide/show me  Hide/show me
</div>

</body>
</html>

1 Ответ

0 голосов
/ 05 сентября 2018

Понял 

<svg>..................
  <circle id="button" cx="65" cy="55" r="4" stroke="black" stroke-width="3" 
  fill="red" <button onclick="myFunction()">Try it</button> />

<script>
  function myFunction() {
  var x = document.getElementById("test");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
<svg>
...