Diagonal hatchings for SVG-elements - css
I want to add diagonal colored hatchings to polygons in svg using css.
I know you could use patterns but I am concerned about performance issues when there are too many different patterns that's why I'd rather use css.
I found the repeating-linear-gradient but wasn't able to get it to work on svg elements. Is that possible? If not, are there any other ways in css to add diagonal hatchings to svg elements?
In general browsers do not currently support adding CSS gradients to SVG elements.
You would need to use SVG <linearGradient> elements instead.
Here's an example.
<svg width="300" height="300">
<defs>
<linearGradient id="hatch1"
gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="10" y2="10"
spreadMethod="repeat">
<stop offset="0%" stop-color="transparent"/>
<stop offset="90%" stop-color="transparent"/>
<stop offset="90%" stop-color="green"/>
<stop offset="100%" stop-color="green"/>
</linearGradient>
</defs>
<circle cx="150" cy="150" r="100" fill="url(#hatch1)" stroke="blue"/>
</svg>
Related
Firefox and Safari are not rendering SVGs properly
I'm making a website for a client which sells a board game. The boards come with different coloring, so to display them it felt natural to use SVG, because they designed them with illustrator. Everything was fine on chrome and edge, the 2 browsers I'm using daily. However, on Safari and firefox some of the SVGs appears glitchy, with missing parts or miss connected ones.
Here is how one looks like on edge:
And here it is on firefox (the difference is circled in red):
Here is a minimal reproducible example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 134.92 134.92">
<defs>
<style>
.cls-2{clip-path:url(#clip-path);}
.cls-3{fill:url(#linear-gradient);}
.cls-4{fill:#dcccb9;}
.cls-5{fill:#fff;}
</style>
<linearGradient xmlns="http://www.w3.org/2000/svg" id="linear-gradient" x1="0.06" y1="-0.06" x2="134.85" y2="134.98" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#eb600a"/>
<stop offset="1" stop-color="#ec7724"/>
</linearGradient>
</defs>
<g id="Calque_2" data-name="Calque 2">
<g id="PLATEAUX">
<g class="cls-2">
<rect xmlns="http://www.w3.org/2000/svg" class="cls-3" width="134.92" height="134.92"/>
<rect xmlns="http://www.w3.org/2000/svg" class="cls-4" x="10.22" y="10.22" width="114.48" height="114.48" rx="3.01"/>
<path xmlns="http://www.w3.org/2000/svg" class="cls-5" d="M33.45,120.25h0l0,0a.42.42,0,0,0,0-.06s0,0,0-.06l0,0,0-.07a373164063697.4,373164063697.4,0,0,1,0-.1.13.13,0,0,1,0-.06.08.08,0,0,1,0,0,.05.05,0,0,1,0,0l.06,0,.06,0,0,0a.14.14,0,0,1,0,.06.2.2,0,0,1,0,.07.25.25,0,0,1,0,.08s0,.05,0,.08l.06,0a.09.09,0,0,0,0-.06l0,0h0v0h0a.16.16,0,0,1-.06.08.17.17,0,0,1-.1,0l0,.09-.06.07-.07,0a.11.11,0,0,1-.08,0h-.06l-.06,0a.15.15,0,0,1,0-.06.36.36,0,0,1,0-.11.69.69,0,0,1,0-.13.75.75,0,0,1,.07-.12l0,0h0s0,0,0,0v0l0,0a.35.35,0,0,0,0,.06.19.19,0,0,0,0,.08.46.46,0,0,0,0,.14A.08.08,0,0,0,33.45,120.25Zm.11-.27a.39.39,0,0,0,0-.13s0,0,0,0a0,0,0,0,0,0,0v.07s0,0,0,0,0,0,0,0l0,0v0Z" transform="translate(3.68 3.68)"/>
</g>
</g>
</g>
</svg>
It looks like paths are not rendered in the same order on chrome and firefox.
Additional information:
My client is designing these boards with an old version of illustrator (2010 or something similar)
The website is made with wordpress, meaning that I import the svg with the editor and the client will in the future use wordpress to add more SVGs
There are smaller glitches with the texts on the image but they are due to the decimal precision (2 diigits) and they are ok
My question is: What can I do to make the SVGs render properly on Safari and Firefox?
Thanks for your help.
The problem is an overflow. Look at this path d attribute string. The bold part is supposed to be two fixed point numbers:
M33.45,120.25h0l0,0a.42.42,0,0,0,0-.06s0,0,0-.06l0,0,0-.07a373164063697.4,373164063697.4,0,0,1,0-.1.13.13,0,0,1,0-.06.08.08,0,0,1,0,0,.05.05,0,0,1,0,0l.06,0,.06,0,0,0a.14.14,0,0,1,0,.06.2.2,0,0,1,0,.07.25.25,0,0,1,0,.08s0,.05,0,.08l.06,0a.09.09,0,0,0,0-.06l0,0h0v0h0a.16.16,0,0,1-.06.08.17.17,0,0,1-.1,0l0,.09-.06.07-.07,0a.11.11,0,0,1-.08,0h-.06l-.06,0a.15.15,0,0,1,0-.06.36.36,0,0,1,0-.11.69.69,0,0,1,0-.13.75.75,0,0,1,.07-.12l0,0h0s0,0,0,0v0l0,0a.35.35,0,0,0,0,.06.19.19,0,0,0,0,.08.46.46,0,0,0,0,.14A.08.08,0,0,0,33.45,120.25Zm.11-.27a.39.39,0,0,0,0-.13s0,0,0,0a0,0,0,0,0,0,0v.07s0,0,0,0,0,0,0,0l0,0v0Z
Firefox seems to have a problem interpreting this as a number, while Chrome at least seems not to produce a suprising rendering.
Adobe Illustrator has a way of minimizing these path commands that makes them hard to read, but you can make out what is supposed to happen:
...0-.07a373164063697.4,373164063697.4,0,0,1,0-.1.13.13,0,0,1,0-.06...
is two relative arc commands, the first with a very large radius. You can safely replace the first arc segment with a line segment. But since the following command is also an arc, written without the command letter a, it needs now to be amended for the following segment:
...0-.07l0-.1a.13.13,0,0,1,0-.06...
Here is the completed result:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 134.92 134.92">
<defs>
<style>
.cls-2{clip-path:url(#clip-path);}
.cls-3{fill:url(#linear-gradient);}
.cls-4{fill:#dcccb9;}
.cls-5{fill:#fff;}
</style>
<linearGradient xmlns="http://www.w3.org/2000/svg" id="linear-gradient" x1="0.06" y1="-0.06" x2="134.85" y2="134.98" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#eb600a"/>
<stop offset="1" stop-color="#ec7724"/>
</linearGradient>
</defs>
<g id="Calque_2" data-name="Calque 2">
<g id="PLATEAUX">
<g class="cls-2">
<rect xmlns="http://www.w3.org/2000/svg" class="cls-3" width="134.92" height="134.92"/>
<rect xmlns="http://www.w3.org/2000/svg" class="cls-4" x="10.22" y="10.22" width="114.48" height="114.48" rx="3.01"/>
<path xmlns="http://www.w3.org/2000/svg" class="cls-5" d="M33.45,120.25h0l0,0a.42.42,0,0,0,0-.06s0,0,0-.06l0,0,0-.07l0-.1a.13.13,0,0,1,0-.06.08.08,0,0,1,0,0,.05.05,0,0,1,0,0l.06,0,.06,0,0,0a.14.14,0,0,1,0,.06.2.2,0,0,1,0,.07.25.25,0,0,1,0,.08s0,.05,0,.08l.06,0a.09.09,0,0,0,0-.06l0,0h0v0h0a.16.16,0,0,1-.06.08.17.17,0,0,1-.1,0l0,.09-.06.07-.07,0a.11.11,0,0,1-.08,0h-.06l-.06,0a.15.15,0,0,1,0-.06.36.36,0,0,1,0-.11.69.69,0,0,1,0-.13.75.75,0,0,1,.07-.12l0,0h0s0,0,0,0v0l0,0a.35.35,0,0,0,0,.06.19.19,0,0,0,0,.08.46.46,0,0,0,0,.14A.08.08,0,0,0,33.45,120.25Zm.11-.27a.39.39,0,0,0,0-.13s0,0,0,0a0,0,0,0,0,0,0v.07s0,0,0,0,0,0,0,0l0,0v0Z" transform="translate(3.68 3.68)"/>
</g>
</g>
</g>
</svg>
I have no idea if the path in this new variant is what was originally intended. The outline looks a bit strange:
If it is not, Illustrator is the problem.
SVG image coloured in three sections
I need to dynamically colour an SVG image on the website. The website will complete some calculations, based on the users' input, and, rather than producing a pie chart, the results have to displayed as different colours on the image. No issues implementing the calculations, however, I have no experience of working with SVGs - the best way I found so far was to use the below: <defs> <linearGradient id="myGradient" gradientTransform="rotate(0)"> <stop offset="33%" stop-color="gold" stop-opacity="1" /> <stop offset="66%" stop-color="red" stop-opacity="1"/> <stop offset="80%" stop-color="blue" stop-opacity="1"/> </linearGradient> </defs> This gives me almost the result I am looking for: However, I need to prevent colours merging into each other. Any help will be appreciated!
How to draw a fill svg?
I want to animate my logo like drawing it for reveal it,
it is looking like that:
is it possible to draw only with a fill?
every tutorials i looked showed only the possibility to draw with strokes.
but i actually want the same drawing effect with my fill:
.st1{fill:black;}
This is my full svg code:
https://jsfiddle.net/b4dn44kL/
With a nice and simple logo like that, you can easily fake it by using strokes: Add a couple of "fake" lines to your SVG with stroke-width wide enough to cover the logo. Use the original logo path (.st1) as a clipPath on those lines to hide the parts that are outside the logo. Animate the "fake" lines. (How SVG Line Animation Works) Updated fiddle: https://jsfiddle.net/b4dn44kL/1/
The short answer is no. There is no easy way to have the "drawn line" effect for an arbitrary filled shape. You could use a mask of a linear fill to "fill" it from top to bottom, or bottom to top. But that obviously would follow the shape of the line around the loop etc. You are pretty much stuck with using the traditional animation technique: draw a sequence of frames and show them one after the other.
this is the gradient solution i found: <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"> <animate attributeName="stop-opacity" values="0; 1" begin="middle1.end" dur="1s" fill="freeze" /> </stop> <stop offset="40%" style="stop-color:rgb(255,255,255);stop-opacity:0"> <animate attributeName="stop-opacity" values="0; 1" begin="2000ms" dur="1s" id="middle1" fill="freeze" /></stop> <stop offset="70%" style="stop-color:rgb(255,255,255);stop-opacity:0"> <animate attributeName="stop-opacity" values="0; 1" begin="800ms" dur="2s" id="middle" fill="freeze" /></stop> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0"> <animate attributeName="stop-opacity" values="0; 1" dur="1s" id="down" fill="freeze" /></stop> </lineargradient> </defs> https://jsfiddle.net/9mhxpbph/
SVG, how would I define text to apply to a Cylinder?
I am attempting to apply text to a 3D image of a Cylinder using HTML and SVG. I can get the text to follow a textpath or calculate dx and dy for a textspan so that it follows the curve of an ellipse but the perspective is wrong. I have seen examples with the correct perspective but they were created using a drawing program like Corel Draw and I need this to work in a responsive Web site. The textpath bends the text vertically so for example an L is just tilted at the outer edges of the cylinder where the vertical part of the L should stay parallel to the sides of the cylinder. Using textspan with dx and dy attributes keeps the vertical part of an L vertical but the base does not follow the elliptical path. The text I am writing to the cylinder is fairly limited so I could possibly pre-process it into a set of glyphs but there is too many possibilities to do this manually. I appreciate any tips offered on how to make this look visually correct. -- edited -- Based on the comments I now realize that even though I can fake a 3D image there is no z axis so to make this work correctly I might need to generate the graphic using something that supports 3D images. If I use something like that ideally it would allow for a responsive feel. Here is an example: https://jsfiddle.net/9bzaytnj/ <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <ellipse cx="65" cy="50" rx="60" ry="15" id="lid"></ellipse> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="rgb(80,80,80)"></stop> <stop offset="30%" stop-color="rgb(255,255,255)"></stop> <stop offset="100%" stop-color="rgb(80,80,80)"></stop> </linearGradient> <ellipse cx="65" cy="70" rx="60" ry="15" id="bottom"></ellipse> <rect x="5" y="50" width="120" height="20" id="face"></rect> <clipPath id="clip" clipPathUnits="userSpaceOnUse"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bottom"></use> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#face"></use> </clipPath> <path id="myTextPath" d="M5,62.5 a35,9 0 1,0 120,0"></path> </defs> <rect x="5" y="50" width="120" height="35" fill="url(#gradient)" clip-path="url(#clip)"></rect> <use fill="grey" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lid"></use> <text style="font-size:10"> <textPath anchor="middle" startoffset="20%" xlink:href="#myTextPath" >LX HHH LL HHH</textPath> </text> <path d="M5,70 a35,9 0 1,0 120,0" style="stroke:#660000; fill:none;"></path> </svg>
Make sun rays figure using css3
Please I want to know how to make something similar to sunrise using css3. Below is a sample.
This article (though it talks about animating the rays also) decribes making a suburst pattern http://designrshub.com/2013/01/css3-keyframe-animations.html. But, I would use an svg image. See Is Starburst effect doable in CSS3? the SVG: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="512px" height="512px" viewBox="-256 -256 512 512" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Burst</title> <defs> <g id="burst"> <g id="quad"> <path id="ray" d="M0,0 -69,-500 69,-500 z" /> <use xlink:href="#ray" transform="rotate(30)"/> <use xlink:href="#ray" transform="rotate(60)"/> <use xlink:href="#ray" transform="rotate(90)"/> </g> <use xlink:href="#quad" transform="rotate(120)"/> <use xlink:href="#quad" transform="rotate(240)"/> </g> <radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" stop-color="white" stop-opacity="0.65"/> <stop offset="100%" stop-color="black" stop-opacity="0.65"/> </radialGradient> <!-- a circle mask --> <mask id="m"><circle r="256" fill="white"/></mask> </defs> <!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) --> <g mask="url(#m)" transform="scale(1, 0.75)"> <use xlink:href="#burst" fill="lightslateblue"/> <use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/> <circle r="360px" fill="url(#grad)" /> </g> </svg>
Yes, it is possible. Working demo: https://codepen.io/lethargic/full/RRYdxX I've written a vanilla CSS version as well as a Sass mixin at github.com/pestbarn/starburst.css. Cross-browser? As far as I can tell, yes. Needs testing in IE versions below 11, but seems well supported otherwise (full browser support as of 2019). Animatable? Yep, like you would animate any other elements. Caveats? Alas, there is. Using colors that are far from another on the color wheel will create jagged edges. I'd recommend using colors that are close to one another. Also, since the effect is created using pseudo elements, you will in some cases need to explicitly set the element's height and width. Using the Sass mixin, you can simply do the following: #include starburst(both, 11, #184256, #194052); This will create a starburst/sunburst effect with the colors you asked for, with the bursts being 11 degrees apart (smaller number = tighter burst).