0
217
Views<svg> & <img> muestran diferentes glifos; <svg> tiene artefacto
En React, estoy tratando de mostrar un SVG y poder cambiar dinámicamente su color, pero hay un "artefacto" extraño cuando se usa como componente, incluso con exactamente el mismo código.
La izquierda es <img src="checkmark.svg"/> , la derecha es como un componente React <svg>
Código:
marca de verificación.svg
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 24L13.5 28.5L31 11" stroke="#626262" stroke-width="3" stroke-linecap="round"/> </svg>Marca de verificación SVG.jsx
const StepCheckmarkSVG = () => { return ( <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 24L13.5 28.5L31 11" stroke="#626262" stroke-width="3" stroke-linecap="round" /> </svg> ); };Es literalmente el mismo código SVG. ¿Por qué se muestran de manera diferente?
·
Juan Pablo Isaza
1 answers
Answer question0
Me parece bien:
const element = <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 24L13.5 28.5L31 11" stroke="#626262" stroke-width="3" stroke-linecap="round" /> </svg>; ReactDOM.render(element,document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div> 
·
Juan Pablo Isaza
Report
Answer question