Hiding SVG that is referenced later

 An SVG would not show when it was hidden in a 'div' with 'display: none' and referenced later in a 'use' tag.


To fix this, I put the SVG in a 'defs' tag inside an outer 'svg' tag. I hide this outer 'svg' by saying: 'position: absolute', 'height: 0' and 'width: 0'. 




Comments

Post a Comment

Popular posts from this blog

How a CSS fish animation works

Image
 I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle. The original is by Yusuke Nakaya. See:      'codepen.io/YusukeNakaya/pen/WNopRwX' The fish are made of CSS triangles:     .pfshFish-body .pfshScale {         width: 0;         height: 0;         border-width: 0 0 3.125em 6.25em;     @keyframes fishColor {       0% {         border-color: transparent transparent #6C99C6 transparent; The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish:     .pfshFish-body .pfshScale.-pfshTop.-pfshFront {         transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg)                    translate(0.09375em, 0.15625em);     }     .pfshFish-body .pfshScale.-pfshTop.-pfshBack...
Read more

Overriding 'alert' to write to 'console.log'

Image
 I define my own global function 'alert' that writes the message using 'console.log'.  I still use 'alerts' for debugging. I can leave the alerts in when going live and just override the 'alert' function. I also still debug by adding colored backgrounds to HTML elements. The debugger on my old Konqueror browser hangs the browser. The browser is 15 years old and I compiled it myself (slightly wrongly) from the sources.
Read more

Simple animation spacing out letters in an centred phrase

Image
 Animating the 'letter-spacing' of a centred piece of text is simple and looks nice. There is an example on 'codepen.io':     'codepen.io/Bert-Beckwith/pen/myVBZdw' This was one of my first animations for my game. I used JavaScript to do the animation. This looks a bit jerky but uses much less resources than the smoother simple CSS animation above. 
Read more