|
|
| Line 105: |
Line 105: |
| | <circle cx="220" cy="25" r="20" fill="blue" onclick="ToggleOpacity(evt)" opacity="1"/> | | <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="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 ouchy
| |
| − | </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"> | | <g id="DisplayGroup" onclick='ToggleDisplay(evt, "DisplayGroup")' display="none"> |
| | <circle cx="100" cy="335" r="20" fill="orange"/> | | <circle cx="100" cy="335" r="20" fill="orange"/> |