Difference between revisions of "Canyon Map/Test"

From B.E.R.T. Wiki

< Canyon Map
Line 2: Line 2:
  
 
a test to see if we can get dynamic SVG to execute in a page.
 
a test to see if we can get dynamic SVG to execute in a page.
−
Above is a raw SVG
+
Above is a SVG file reference
−
below ( view source ) is raw html
+
-----
 +
here is raw svg of same
  
  
 
<html>
 
<html>
−
<head>
+
<body>
−
   <script>
+
<object>
 +
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" onload="Init(evt)">
 +
  <title>Hiding and Showing Elements</title>
 +
 
 +
  <desc>
 +
      A demonstration of the differences in approach to hiding an element or group of elements in SVG, using the display, visibility, and opacity style properties.
 +
      Written by Doug Schepers [[email protected]], September 2003.
 +
  </desc>
 +
 
 +
   <script type="text/ecmascript"><![CDATA[
 +
      var SVGDocument = null;
 +
      var SVGRoot = null;
 +
 
 +
      function Init(evt)
 +
      {
 +
        SVGDocument = evt.target.ownerDocument;
 +
        SVGRoot = SVGDocument.documentElement;
 +
 
 +
      }
 +
 
 +
      function ToggleDisplay(evt, targetId)
 +
      {
 +
        var newTarget = evt.target;
 +
        if (targetId)
 +
        {
 +
            newTarget = SVGDocument.getElementById(targetId);
 +
        }
 +
        var newValue = newTarget.getAttributeNS(null, 'display')
  
−
  function pointAtMe(e) {
+
        if ('none' != newValue)
−
    var svg = document.getElementById("arrow");
+
        {
−
    svg.style.display = "block";
+
            newValue = 'none';
−
    svg.style.position = "absolute";
+
        }
−
    svg.style.top = (e.target.offsetTop - 40) + "px";
+
        else
−
    svg.style.left = (e.target.offsetLeft - 110) + "px";
+
        {
−
  }
+
            newValue = 'inline';
 +
        }
 +
        newTarget.setAttributeNS(null, 'display', newValue);
  
−
  </script>
+
        if (targetId)
−
  <style>
+
        {
−
    OBJECT { position: absolute; display: none } /* hide initially */
+
            SVGDocument.getElementById(targetId + 'Exception').setAttributeNS(null, 'display', 'inline');
−
    BUTTON { display: block; margin: 100 auto }
+
        }
−
  </style>
+
      }
−
</head>
 
  
−
<body>
+
      function ToggleVisibilty(evt, targetId)
 +
      {
 +
        var newTarget = evt.target;
 +
        if (targetId)
 +
        {
 +
            newTarget = SVGDocument.getElementById(targetId);
 +
        }
 +
        var newValue = newTarget.getAttributeNS(null, 'visibility')
  
−
<object id="arrow" width="100px" height="100px">
+
        if ('hidden' != newValue)
−
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 100" width="100%" height="100%">
+
        {
−
    <path stroke="#000000" id="Arrow" d="m2.749992,2.750002l106.118515,0l88.431496,47.250097l-88.431496,47.249901l-106.118515,0l0,-94.499998z" stroke-width="3"/>
+
            newValue = 'hidden';
−
  </svg>
+
        }
−
</object>
+
        else
 +
        {
 +
            newValue = 'visible';
 +
        }
 +
        newTarget.setAttributeNS(null, 'visibility', newValue);
  
−
<div>
+
        if (targetId)
−
  <button onclick="pointAtMe(event)">Button 1</button>
+
        {
−
  <button onclick="pointAtMe(event)">Button 2</button>
+
            SVGDocument.getElementById(targetId + 'Exception').setAttributeNS(null, 'visibility', 'visible');
−
</div>
+
        }
 +
      }
  
−
</body>
+
      function ToggleOpacity(evt, targetId)
 +
      {
 +
        var newTarget = evt.target;
 +
        if (targetId)
 +
        {
 +
            newTarget = SVGDocument.getElementById(targetId);
 +
        }
 +
        var newValue = newTarget.getAttributeNS(null, 'opacity')
 +
 
 +
        if ('0' != newValue)
 +
        {
 +
            newValue = '0';
 +
        }
 +
        else
 +
        {
 +
            newValue = '1';
 +
        }
 +
        newTarget.setAttributeNS(null, 'opacity', newValue);
 +
 
 +
        if (targetId)
 +
        {
 +
            SVGDocument.getElementById(targetId + 'Exception').setAttributeNS(null, 'opacity', '1');
 +
        }
 +
      }
 +
 
 +
  ]]></script>
 +
  <circle cx="100" cy="25" r="20" fill="orange" onclick="ToggleDisplay(evt)" display="none"/>
 +
  <text x="100" y="60" font-size="15px" text-anchor="middle">Display</text>
 +
 
 +
  <circle cx="160" cy="25" r="20" fill="red" onclick="ToggleVisibilty(evt)" visibility="hidden"/>
 +
  <text x="160" y="60" font-size="15px" text-anchor="middle">Visibilty</text>
 +
 
 +
  <circle cx="220" cy="25" r="20" fill="blue" onclick="ToggleOpacity(evt)" opacity="1"/>
 +
  <text x="220" y="60" font-size="15px" text-anchor="middle">Opacity</text>
 +
 
 +
  <text x="10" y="80" font-size="17px">
 +
      <tspan dx="1em" dy="1em">
 +
          As you can see, by clicking each circle above,
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          once you toggle 'visibility' or 'display', you can't
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          change it back, because it no longer responds to
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          click events; setting 'opacity' to 0 still allows
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          you to target it.
 +
      </tspan>
 +
      <tspan x="10" dx="1em" dy="1.5em">
 +
          However, 'opacity' is the most computationally
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          expensive of the three, followed by 'visibility';
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          'display: none' is the cheapest, because it simply
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          does not render at all.
 +
      </tspan>
 +
      <tspan x="10" dx="1em" dy="1.5em">
 +
          If you are trying to hide an entire group, except
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          for one particular member of that group, use
 +
      </tspan>
 +
      <tspan x="10" dy="1em">
 +
          'visibility' as it is overrideable in inheritance.
 +
      </tspan>
 +
  </text>
 +
 
 +
  <g id="DisplayGroup" onclick='ToggleDisplay(evt, "DisplayGroup")' display="none">
 +
      <circle cx="100" cy="335" r="20" fill="orange"/>
 +
      <circle id="DisplayGroupException" cx="100" cy="335" r="5" fill="lime" display="inline"/>
 +
  </g>
 +
  <text x="100" y="370" font-size="15px" text-anchor="middle">Display</text>
 +
 
 +
  <g id="VisibiltyGroup" onclick='ToggleVisibilty(evt, "VisibiltyGroup")' visibility="visible">
 +
      <circle cx="160" cy="335" r="20" fill="red"/>
 +
      <circle id="VisibiltyGroupException" cx="160" cy="335" r="5" fill="lime" visibilty="visible" visibility="visible"/>
 +
  </g>
 +
  <text x="160" y="370" font-size="15px" text-anchor="middle">Visibilty</text>
 +
 
 +
  <g id="OpacityGroup" onclick='ToggleOpacity(evt, "OpacityGroup")' opacity="1">
 +
      <circle cx="220" cy="335" r="20" fill="blue"/>
 +
      <circle id="OpacityGroupException" cx="220" cy="335" r="5" fill="lime" opacity="1"/>
 +
  </g>
 +
  <text x="220" y="370" font-size="15px" text-anchor="middle">Opacity</text>
 +
 
 +
</svg>
 +
</object>
 +
</body>
 
</html>
 
</html>
 +
 +
 +
----
 +
below ( view source ) is raw html

Revision as of 10:36, 29 June 2018

Svg test.svg

a test to see if we can get dynamic SVG to execute in a page. Above is a SVG file reference

here is raw svg of same


Hiding and Showing Elements A demonstration of the differences in approach to hiding an element or group of elements in SVG, using the display, visibility, and opacity style properties. Written by Doug Schepers [[email protected]], September 2003. Display Visibilty Opacity As you can see, by clicking each circle above, once you toggle 'visibility' or 'display', you can't change it back, because it no longer responds to click events; setting 'opacity' to 0 still allows you to target it. However, 'opacity' is the most computationally expensive of the three, followed by 'visibility'; 'display: none' is the cheapest, because it simply does not render at all. If you are trying to hide an entire group, except for one particular member of that group, use 'visibility' as it is overrideable in inheritance. Display Visibilty Opacity


below ( view source ) is raw html

Retrieved from "https://www.badubadu.com/wiki/index.php?title=Canyon_Map/Test&oldid=470"