Menu
Trying to create an svg background pattern, but:
When I am not using fill it is ok, when using color name like: color: red; it's ok, but if using hex colors, nothing shows up.
here are the codes:
OK:
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='red' d='M 0,10 H 20 L 10,0 Z' /></svg>") repeat-x;
NOT OK:
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='#FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>") repeat-x;
also check out on jsfiddle:
https://jsfiddle.net/vajnabotond/r362xdjn/19/
902
For an SVG <path> element, you can use both a color stroke and a color fill. The fill attribute colors the interior of a graphic element.
Colors in SVG graphics for PostgreSQL's documentation In the universe of 16 million colors there are some with an individual color name.
The fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. Note: As a presentation attribute, fill-rule can be used as a CSS property. You can use this attribute with the following SVG elements: <altGlyph> <path>
# in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #. That is the value of escaped # character.
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='%23FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>") repeat-x; You can find it all well explained on following link: https://codepen.io/gunnarbittersmann/pen/BoovjR
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
