Difference between revisions of "Canyon Map/Test"

From B.E.R.T. Wiki

< Canyon Map

Line 105: Line 105:
  
 
   ]]></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>
  

Revision as of 10:39, 29 June 2018

File: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