Difference between revisions of "Canyon Map/Test"

From B.E.R.T. Wiki

< Canyon Map
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
File:svg_test.svg
+
Funky image testing first a reference to a SVG file, with included javascript.  
  
−
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
 
  
 +
[[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>
 
<body>
 
<body>
 +
<p>be sure to look at the source for this page</p>
 
<object>
 
<object>
 
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" onload="Init(evt)">
 
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" onload="Init(evt)">
Line 105: Line 106:
  
 
   ]]></script>
 
   ]]></script>
−
   <circle cx="100" cy="25" r="20" fill="orange" onclick="ToggleDisplay(evt)" display="none"/>
+
 
 +
 
 +
 
 +
   <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>
 
   <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"/>
+
   <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>
 
   <text x="160" y="60" font-size="15px" text-anchor="middle">Visibilty</text>
  
Line 114: Line 118:
 
   <text x="220" y="60" font-size="15px" text-anchor="middle">Opacity</text>
 
   <text x="220" y="60" font-size="15px" text-anchor="middle">Opacity</text>
  
−
  <text x="10" y="80" font-size="17px">
+
<!-- for some reason none of this displays -->
−
      <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">
+
 
 +
     
 +
<p>more below here, but invisible - except for text blocks. weird. something about the groups?</p>
 +
 
 +
   <g id="DisplayGroup" onclick='ToggleDisplay(evt, "DisplayGroup")' display="inline">
 
       <circle cx="100" cy="335" r="20" fill="orange"/>
 
       <circle cx="100" cy="335" r="20" fill="orange"/>
 
       <circle id="DisplayGroupException" cx="100" cy="335" r="5" fill="lime" display="inline"/>
 
       <circle id="DisplayGroupException" cx="100" cy="335" r="5" fill="lime" display="inline"/>
Line 161: Line 132:
 
   <g id="VisibiltyGroup" onclick='ToggleVisibilty(evt, "VisibiltyGroup")' visibility="visible">
 
   <g id="VisibiltyGroup" onclick='ToggleVisibilty(evt, "VisibiltyGroup")' visibility="visible">
 
       <circle cx="160" cy="335" r="20" fill="red"/>
 
       <circle cx="160" cy="335" r="20" fill="red"/>
−
       <circle id="VisibiltyGroupException" cx="160" cy="335" r="5" fill="lime" visibilty="visible" visibility="visible"/>
+
       <circle id="VisibiltyGroupException" cx="160" cy="335" r="5" fill="lime" visibilty="visible" />
 
   </g>
 
   </g>
 
   <text x="160" y="370" font-size="15px" text-anchor="middle">Visibilty</text>
 
   <text x="160" y="370" font-size="15px" text-anchor="middle">Visibilty</text>
Line 175: Line 146:
 
</body>
 
</body>
 
</html>
 
</html>
−
 
−
 
−
----
 
−
below ( view source ) is raw 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"