Difference between revisions of "Canyon Map/Test"

From B.E.R.T. Wiki

< Canyon Map

 
(12 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>
 
<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 97: Line 106:
  
 
   ]]></script>
 
   ]]></script>
 +
 +
 +
 
   <circle cx="100" cy="25" r="20" fill="orange" onclick="ToggleDisplay(evt)" display="inline"/>
 
   <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>
Line 106: 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.
+
<p>more below here, but invisible - except for text blocks. weird. something about the groups?</p>
      </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">
+
   <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 154: 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>

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