Tengo un SVG que debe completarse según los datos como esta imagen . Necesito llenar los brazos con diferentes colores, la cabeza con diferentes colores y las piernas con diferentes colores, todo usando HTML, CSS y JavaScript. Actualmente lo estoy usando en Angular, que también usa D3.js. ¿Hay algún trabajo alrededor de esto?
Simplemente puede darle al SVG algunas clases y alternarlas usando JS o editar el estilo de relleno de los elementos.
const colors = ['red', 'blue', 'green', 'yellow', 'gray'] setInterval(() => { document.getElementById('hair').style.fill = colors[Math.floor(Math.random() * colors.length)]; }, 200) <?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" width="100px" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve"> <g> <path id="hair" d="M410.439,0c0,0-18.211,44.138-141.241,44.138h-79.448c0,0-123.586-6.073-123.586,105.931v82.476 c0,31.974,12.703,62.632,35.31,85.248h300.138l6.294-6.294c19.474-19.482,31.921-45.047,34.648-72.466 C458.629,77.674,410.439,0,410.439,0"/> <path style="fill:#FDD7AD;" d="M101.473,194.207c0-7.318,1.474-14.292,4.158-20.63c10.099-23.905,38.391-33.66,62.791-24.832 c13.294,4.811,38.179,10.152,83.121,10.152s69.826-5.341,83.121-10.152c24.399-8.828,52.683,0.927,62.791,24.832 c2.675,6.347,4.158,13.312,4.158,20.63l0.238,80.446c0,55.428-4.317,116.401-46.133,156.089 c-14.989,14.239-32.653,25.203-49.717,36.776c-17.064,11.564-32.106,26.827-54.219,26.827s-37.155-15.263-54.219-26.827 c-17.055-11.573-34.719-22.537-49.717-36.776c-41.807-39.689-46.371-101.667-46.371-157.087V194.207z"/> </svg>Dado que los SVG son solo marcas que se pueden escribir directamente en HTML, también pueden tener atributos como clases e ID, por lo que puede diseñarlos como lo haría con los elementos regulares.
También puede orientarlos con JS para agregar/eliminar atributos, etc.
Aquí hay un ejemplo súper simple de un SVG con estilo para ilustrar:
#rect-1 { fill: red; } #rect-2 { fill: green; } #rect-3 { fill: blue; } #rect-4 { fill: yellow; } <svg> <rect id="rect-1" x="0" y="0" width="10" height="10" /> <rect id="rect-2" x="0" y="20" width="10" height="10" /> <rect id="rect-3" x="20" y="20" width="10" height="10" /> <rect id="rect-4" x="20" y="0" width="10" height="10" /> </svg>