Intentando crear un patrón de fondo svg, pero:
Cuando no estoy usando relleno, está bien, cuando uso un nombre de color como: color: red; está bien, pero si usa colores hexadecimales, no aparece nada.
aquí están los códigos:
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;NO ESTÁ BIEN:
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;también echa un vistazo a jsfiddle:
# en las URL inicia un identificador de fragmento. Entonces, para que eso funcione, escriba %23 en lugar de # . Ese es el valor del carácter # escapado.
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;Puedes encontrarlo todo bien explicado en el siguiente enlace: https://codepen.io/gunnarbittersmann/pen/BoovjR