es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tag: ANDROIDSVG

Mostrando SVG sin procesar en React

Hola, estoy obteniendo un SVG de una API en esta forma: <svg>…..</svg> Estoy pasando este SVG como una propiedad a este componente MainDisplay: class MainDispay extends React.Component { constructor(props) { donothing(props); super(props); console.log(“props”, this.props.Collections); } async componentDidMount() {} render() { return ( <> {this.props.Collections.map((DataObj, i) => ( <div key=”{i}”> <div>{DataObj.name}</div> . . . Read more

Mostrar imagen dentro de svg

Quiero colocar una imagen PNG en el centro de un círculo SVG en un archivo HTML simple. Aún así, quiero un color de fondo verde claro para el círculo y la imagen no debe llenar todo el círculo. ¿Cómo puedo hacer eso?

React: Usando con dangerouslySetInnerHTML En React, la forma de utilizar el elemento en SVG con el método dangerouslySetInnerHTML es la siguiente: 1. Importa el componente necesario de React: “`javascript import React from ‘react’; “` 2. Crea una constante que contenga el contenido SVG en formato de cadena: “`javascript const svgContent = ` `; “` 3. Crea un componente en React que utilice dangerouslySetInnerHTML para insertar el contenido SVG: “`javascript const SVGComponent = () => { return
; }; “` 4. Utiliza el componente en tu aplicación: “`javascript const App = () => { return (

Aplicación React

); }; “` Al seguir estos pasos, podrás utilizar el elemento en SVG dentro de tu aplicación React utilizando dangerouslySetInnerHTML.

Estoy tratando de usar svg con <defs> definido en otro lugar de la página. const data = { icons: { freezable: “<svg><path d=”\”\”/”></path></svg>”, vegetarian: “<svg><path d=”\”\”/”></path></svg>”, } }; const SvgDefs = (icons) => { return Object.keys(icons).map(iconName => { return <span key=”{data.icons[iconName]}” dangerouslysetinnerhtml=”{{” __html:=”” data.icons[iconname].replace(‘svg’,=””></span><code>svg id=”svg-${iconName}”</code>) }} />; }); }; Con . . . Read more