Necesito mostrar imágenes svg en mi página. Dado que las imágenes svg se diseñarán (propiedades como relleno, trazo, etc.) con css, el svg debe estar en línea. Ahora también necesito configurar el atributo de clase ( <svg class="someClass">...</svg> . ) de estos archivos svg dinámicamente.
Ahora, mi problema es que la página puede cargar cualquier cantidad de imágenes svg dinámicamente. Y todos los nombres de clase se cargarán desde una matriz. Como el svg está en línea, es imposible usar un bucle para completar los nombres de clase.
Entonces pensé en usar json para manejar esto.
{ "icon-name-1" : { "viewbox" : "0 0 100 100", "svgContent" : "..." }, "icon-name-2" : { "viewbox" : "0 0 100 100", "svgContent" : "..." }, ... }Luego, en PHP, cargué el archivo en un json_object y usé una función para cargar el ícono y finalmente recorrí la matriz, ahora con los nombres de los íconos también, para repetir el svg.
$iconObj = json_decode(file_get_contents("icons.json")); function load_SVG ($iconObj, $iconName, $svgClassName) { $viewbox = $iconObj->viewbox; $svg = "<svg class='$svgClassName' viewBox='$viewbox'>"; $svg .= $iconObj->$iconName->svgContent; $svg .= "</svg>"; return $svg; } // array is generated dynamically too $arr = [ ["class-name-1", "icon-name-1"], ["class-name-2", "icon-name-2"], ... ]; foreach ($arr as $item) { load_SVG($iconObj, $item[0], $item[1]); }Tengo la sensación de que estoy complicando demasiado las cosas aquí. Entonces, me gustaría saber si hay una mejor manera u otra forma de lograr lo mismo. Pero una cosa que me gusta de esto es que no tengo que ver ningún svg en línea en el código que, sin duda, hubiera sido una pesadilla :)
De hecho, este fue un caso de sobre-complicación. Todo lo que tenía que hacer era usar un marcador de posición como class={{class-name}} en el código svg y luego cargar el archivo svg y usar una sustitución de cadena simple para lograr lo mismo.
$svg = file_get_contents($svgPath); $svg = str_replace("{{class-name}}", $array[$index], $svg);El JSON fue completamente inútil. Lección aprendida.
Yo diría que sí. Teniendo en cuenta que lo está haciendo dinámicamente, ¿no sería mejor simplemente reemplazar las etiquetas de clase o insertarlas a través de JQuery o javascript? Le brindan excelentes herramientas para marcar todas las etiquetas creadas dinámicamente.
{<ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> $( "content" ).each( function( index, element ){ console.log( $( this ).text() ); });}naturalmente, tendría que modificar su información de depuración en un método de modificación de clase en lugar de simplemente depurar el texto.
Después de leer los comentarios, proporcionaré una respuesta alternativa, pero no reclamaré crédito por esto.
Alguien más respondió esta pregunta: ¿Hay una mejor manera de escribir cadenas HTML en PHP?
La sugerencia que yo haría está al final del hilo.