CODEWITHSUNDEEP
javascripthtmlsvg
Meg Doxy
Meg Doxy

Reputation: 45

Why isn't my svg's embedded javascript working in an html document?

I have the following code for an svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="470px" height="260px" version="1.1" onload="addEvents()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
    <image xlink:href="baby.jpg" x="0" y="0" height="260px" width="470px">
    </image>
    <g transform="translate(100,50)">
      <circle class="circle" id="tip1" cx="20" cy="0" r="10" stroke="" stroke-width="0" fill="rgb(143, 124, 184)" />
      <g transform="translate(10,15)">
      <polygon class="baby-tip tip1 arrow" points="0,10 10,0, 20,10" style="fill: rgb(143, 124, 184)" />
      </g>
       <rect class="baby-tip tip1" x="0" y="25" height="70" width="220" rx="5" ry="5" style="fill: rgb(143, 124, 184)"/>
  <text class="baby-tip tip1" x="10" y="45">Here is a whole bunch of text.</text>
  <text class="baby-tip tip1" x="10" y="60">Clearly this should wrap, but it</text>
  <text class="baby-tip tip1" x="10" y="75">doesn't. What will we do?</text>
  </g>
  <g transform="translate(150,160)">
      <circle class="circle" id="tip2" cx="20" cy="0" r="10" stroke="" stroke-width="0" fill="rgb(143, 124, 184)" />
      <g transform="translate(10,15)">
      <polygon class="baby-tip tip2 arrow" points="0,10 10,0, 20,10" style="fill: rgb(143, 124, 184)" />
      </g>
       <rect class="baby-tip tip2" x="0" y="25" height="70" width="220" rx="5" ry="5" style="fill: rgb(143, 124, 184)"/>
  <text class="baby-tip tip2" x="10" y="45">Here is a whole bunch of text.</text>
  <text class="baby-tip tip2" x="10" y="60">Clearly this should wrap, but it</text>
  <text class="baby-tip tip2" x="10" y="75">doesn't. What will we do?</text>
  </g>
    <style>
  .baby-tip {
    font-size: 14px;
    font-family: "MuseoSans100", Arial, Helvetica, sans-serif;
    fill: white;
    opacity: 0;
  }
  </style>
<script>

    var log = console.info;
  function addEvents() { 
        var dots = document.getElementsByClassName("circle");

        var i = dots.length;
        while(i--) {
            toggleTips(dots[i]);
        }
}
function closeOtherTips(otherTips) {
    var l = otherTips.length;
    while (l--) {
        otherTips[l].style.opacity = 0;
    }
}
    function toggleTips(dot, l) {

        window.dot = dot;
        dot.addEventListener("click", function() {
            var className = dot.id;
            var tips = document.getElementsByClassName(className);
            var otherTips = document.querySelectorAll('text:not(.' + className + '), rect:not(.' + className + '), polygon:not(.' + className + ')');
            var t = tips.length;
            closeOtherTips(otherTips);
            while (t--) { 
            tips[t].style.opacity != 0 ? tips[t].style.opacity = 0 : tips[t].style.opacity = 1;
        }
      });
  }
  </script>


</svg>

When I save this content as test.svg, and view it in a browser, it runs beautifully - I should see two purple dots, and when I click each one I get a little tool tip, and only one displays at a time.

However, if I create the following html document:

<!DOCTYPE html>
<html>
<body>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<img class="baby-dot-svg" src="test.svg" />
<img class="baby-dot-bg" src="baby.jpg" />
</body>
</html>

Two things change: 1) the tooltip / all js functionality is lost - nothing happens when I click on the dots. 2) the link to baby.jpg no longer works - despite baby.jpg and the svg residing in the same directory, the background of the svg is blank.

See http://images.agoramedia.com/wte3.0/gcms/web_view_svg_test2.html to view this in action.

Why is this breaking?

Upvotes: 1

Views: 48

Answers (1)

LG_PDX
LG_PDX

Reputation: 809

There are mulitple ways to embed SVG files, but the <img> approach doesn't allow it to be interactive.

Try:

<object data="test.svg" type="image/svg+xml">
  <img src="baby.jpg" />
</object>

For more information, see this answer.

Upvotes: 2

Related Questions