0
157
VistasSVG Degradado lineal parada dura
Estoy tratando de lograr una parada dura en un gradiente lineal como este .
Estoy tratando de lograr esto con javascript de la siguiente manera
const color = ["red", "green", "blue", "magenta"]; const svgns = 'http://www.w3.org/2000/svg'; const svgVan = document.querySelector('svg'); const lg = document.createElementNS(svgns, 'linearGradient'); lg.setAttribute('id', 'linear'); lg.setAttribute('x1', '0%'); lg.setAttribute('y1', '0%'); lg.setAttribute('x2', '100%'); lg.setAttribute('y2', '0%'); svgVan.appendChild(lg); color.forEach( (a, i) => { const stop1 = document.createElementNS(svgns, 'stop'); stop1.setAttribute('offset', i / color.length); stop1.setAttribute('stop-color', a); lg.appendChild(stop1) const stop2 = document.createElementNS('svgns', 'stop'); stop2.setAttribute('offset', (i + 1) / color.length); stop2.setAttribute('stop-color', a); lg.appendChild(stop2) } ) const rect = document.createElementNS(svgns, 'rect') rect.setAttribute('x', '100'); rect.setAttribute('y', '100'); rect.setAttribute('width', '600'); rect.setAttribute('height', '200'); rect.setAttribute('fill', 'url(#linear)') rect.setAttribute('stroke', 'black'); svgVan.appendChild(rect); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="container" class="svg-container"></div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720"> </svg> <script src="index2.js"></script> </body> </html> El navegador genera el mismo mark-up que codepen pero el resultado final no es el mismo. A pesar de que el marcado es idéntico
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
const stop2 = document.createElementNS('svgns', 'stop');debiera ser
const stop2 = document.createElementNS(svgns, 'stop');Ver demostración: https://codepen.io/smpao1/pen/vYdaWMW
El espacio de nombres se establece en el espacio de nombres 'svgns', que no se interpretará como un elemento svg válido y, por lo tanto, se ignora.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta