To apply both scale and flip, just list both in your transform: transform=”scale(2,2) scale(-1,1)” Or simply combine the values: transform=”scale(-2,2)” Of course, the issue you have with negative scales is that the objects get flipped across the origin (top left) of the SVG, so they can go off the edge of the document. You need … Read more
I did not find anything for diagonal hatching on the internet either, so I’ll share my solution here: <pattern id=”diagonalHatch” patternUnits=”userSpaceOnUse” width=”4″ height=”4″> <path d=”M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2″ style=”stroke:black; stroke-width:1″ /> </pattern> (note the lower case “l” in the path expression) The above creates a hatch with diagonal lines from the lower left … Read more
Just use fill=”none” and then only the stroke (outline) will be drawn. <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″> <circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”none” /> </svg> Or this if you want two colours: <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″> <circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”none” /> <circle cx=”100″ cy=”50″ r=”39″ stroke=”red” stroke-width=”2″ fill=”none” /> </svg>
While other answers are technically correct, they omit the fact that SVG provides an alternative mechanism for data-*. SVG allows any attribute and tag to be included, as long as it doesn’t conflict with existing ones (in other words: you should use namespaces). To use this (equivalent) mechanism: use mydata:id instead of data-myid, like this: … Read more
You would have to set the center as the center of the filled element. Like this: svg .rotate { transform-box: fill-box; transform-origin: center; transform: rotate(45deg); }
I am coming late to this party, but look what I have found at CodePen ! a[target=”_blank”]::after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); margin: 0 3px 0 5px; } <a class=”external” href=”https://example.org” target=”_blank”>external link</a>
Just had to save it in a text file and give it a .svg extension.
It’s supposed to make the background image available to child elements of the element it’s specified on for things like filter effects that blend content with the background. There may be other uses, but that’s the one I know. If you don’t have it set, then technically the element can’t use backgrounds created by ancestors. … Read more
x and y are absolute coordinates and dx and dy are relative coordinates (relative to the specified x and y). In my experience, it is not common to use dx and dy on <text> elements (although it might be useful for coding convenience if you, for example, have some code for positioning text and then … Read more
To rotate use transform=”rotate(deg, cx, cy)”, where deg is the degree you want to rotate and (cx, cy) define the centre of rotation. For scaling/resizing, you have to translate by (-cx, -cy), then scale and then translate back to (cx, cy). You can do this with a matrix transform: transform=”matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy)” … Read more