Difference between revisions of "Canyon Map/Test"

From B.E.R.T. Wiki

< Canyon Map
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
Funky image testing first a reference to a SVG file, with included javascript.
 +
 +
 +
[[Image:Svg_test.svg]]
 +
 +
 +
then in-line HTML, which is behaving oddly. it stops displaying once we're in groups. but I think there is more going on than just that.
  
 
<html>
 
<html>
−
<head>
+
<body>
−
   <script>
+
<p>be sure to look at the source for this page</p>
 +
<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')
 +
 
 +
        if ('none' != newValue)
 +
        {
 +
            newValue = 'none';
 +
        }
 +
        else
 +
        {
 +
            newValue = 'inline';
 +
        }
 +
        newTarget.setAttributeNS(null, 'display', newValue);
 +
 
 +
        if (targetId)
 +
        {
 +
            SVGDocument.getElementById(targetId + 'Exception').setAttributeNS(null, 'display', 'inline');
 +
        }
 +
      }
 +
 
 +
      function ToggleVisibilty(evt, targetId)
 +
      {
 +
        var newTarget = evt.target;
 +
        if (targetId)
 +
        {
 +
            newTarget = SVGDocument.getElementById(targetId);
 +
        }
 +
        var newValue = newTarget.getAttributeNS(null, 'visibility')
 +
 
 +
        if ('hidden' != newValue)
 +
        {
 +
            newValue = 'hidden';
 +
        }
 +
        else
 +
        {
 +
            newValue = 'visible';
 +
        }
 +
        newTarget.setAttributeNS(null, 'visibility', newValue);
 +
 
 +
        if (targetId)
 +
        {
 +
            SVGDocument.getElementById(targetId + 'Exception').setAttributeNS(null, 'visibility', 'visible');
 +
        }
 +
      }
 +
 
 +
      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="inline"/>
 +
  <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="visible"/>
 +
  <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>
 +
 
 +
<!-- for some reason none of this displays -->
  
−
  function pointAtMe(e) {
 
−
    var svg = document.getElementById("arrow");
 
−
    svg.style.display = "block";
 
−
    svg.style.position = "absolute";
 
−
    svg.style.top = (e.target.offsetTop - 40) + "px";
 
−
    svg.style.left = (e.target.offsetLeft - 110) + "px";
 
−
  }
 
  
−
  </script>
+
     
−
  <style>
+
<p>more below here, but invisible - except for text blocks. weird. something about the groups?</p>
−
    OBJECT { position: absolute; display: none } /* hide initially */
 
−
    BUTTON { display: block; margin: 100 auto }
 
−
  </style>
 
−
</head>
 
  
−
<body>
+
  <g id="DisplayGroup" onclick='ToggleDisplay(evt, "DisplayGroup")' display="inline">
 +
      <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>
  
−
<object id="arrow" width="100px" height="100px">
+
  <g id="VisibiltyGroup" onclick='ToggleVisibilty(evt, "VisibiltyGroup")' visibility="visible">
−
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 100" width="100%" height="100%">
+
      <circle cx="160" cy="335" r="20" fill="red"/>
−
    <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"/>
+
      <circle id="VisibiltyGroupException" cx="160" cy="335" r="5" fill="lime" visibilty="visible" />
−
   </svg>
+
   </g>
−
</object>
+
  <text x="160" y="370" font-size="15px" text-anchor="middle">Visibilty</text>
  
−
<div>
+
  <g id="OpacityGroup" onclick='ToggleOpacity(evt, "OpacityGroup")' opacity="1">
−
  <button onclick="pointAtMe(event)">Button 1</button>
+
      <circle cx="220" cy="335" r="20" fill="blue"/>
−
  <button onclick="pointAtMe(event)">Button 2</button>
+
      <circle id="OpacityGroupException" cx="220" cy="335" r="5" fill="lime" opacity="1"/>
−
</div>
+
  </g>
 +
  <text x="220" y="370" font-size="15px" text-anchor="middle">Opacity</text>
  
−
</body>
+
</svg>
 +
</object>
 +
</body>
 
</html>
 
</html>

Latest revision as of 10:56, 29 June 2018

Funky image testing first a reference to a SVG file, with included javascript.


Svg test.svg


then in-line HTML, which is behaving oddly. it stops displaying once we're in groups. but I think there is more going on than just that.

be sure to look at the source for this page

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

more below here, but invisible - except for text blocks. weird. something about the groups?

Display Visibilty Opacity

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