xml - utiliza - ¿Cómo hacer referencia al archivo svg externo en svg correctamente?

ventajas de las imágenes svg

Question

Hola, estoy trabajando en un mapa svg / js, que consta de muchos gráficos svg pequeños (distritos de la ciudad). Pongo todos los gráficos en un archivo propio para que mi archivo svg principal se pueda mantener y no esté hinchado.

¿Cómo puedo hacer referencia a un archivo svg externo de otro svg correctamente?

Resultado esperado: Abra 1.svg en un navegador y vea un rectángulo azul. Cómo debería funcionar: w3c: elemento de uso

Así que esto es lo que intenté: 1.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-       20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000">
<use xlink:href="another.svg#rectangle"/>
</svg>

otro.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-       20010904/DTD/svg10.dtd">
<svg id="rectangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000">
<rect class="blue" x="558.5" y="570" width="5" height="5" />
</svg>

style.css

.blue { fill: blue; }

Resultado:

• Firefox: un rectángulo azul (exactamente lo que quería)
• Chrome: Nada
• Ópera: rectángulo negro

Nota: Lo probé con el elemento de imagen, pero no funcionó con las hojas de estilo, es decir, obtuve un rectángulo negro y no azul.

Importante: cuando desee hacer referencia a otro SVG y desea que el SVG al que se hace referencia forme parte de la estructura formal del documento, puede usar AJAX para hacerlo.

https://bugs.webkit.org/show_bug.cgi?id=12499

Answer 1

De la definición en la especificación SVG que vinculó a :

Los selectores de CSS2 no se pueden aplicar al árbol de DOM clonado (conceptualmente) porque su contenido no forma parte de la estructura formal del documento.

Eso significa que su selector en 1.svg no se aplica al árbol DOM clonado.

Entonces, ¿por qué no simplemente hacer referencia a la hoja de estilo de another.svg en su lugar? Eso debería funcionar en todos los navegadores, y tanto con <use> como con <image> .

Otra opción es diseñar el elemento <use> en el documento svg principal (1.svg), ya que el estilo se coloca en cascada en el árbol clonado desde allí también.

Answer 2

Esto responde a la pregunta original, pero intenta responder a la cuestión de hacer referencia a archivos SVG externos en SVG en términos más amplios, también.

Falta de apoyo SVG

Seis años después, Chrome y Safari todavía no permiten la referenciación / carga de archivos SVG externos .

Esta es la razón por la que <use xlink:href="another.svg#rectangle" class="blue"/> funciona en Firefox, pero no en los navegadores WebKit.

Todo en un solo archivo

Si el proyecto puede permitírselo, simplemente coloque todos los archivos SVG en un archivo HTML o SVG principal. De esta manera, funcionará en los tres navegadores:

• Ejemplo 1 · Ambos SVGs en un archivo (SVG)
• Ejemplo 2 · Ambos SVGs en un archivo (HTML)

Pero entonces, no es realmente externo, ¡concedido!

Para aprovechar el almacenamiento en caché y evitar repetirnos, nos gustaría mantener el contenido SVG repetible en un archivo externo.

Solución: inserte el archivo SVG externo a través de JavaScript

Mantenga los estilos y definiciones en un archivo SVG, mantenga la geometría SVG en algún otro archivo y simplemente cargue el primero desde este último a través de JavaScript.

En SVG puro y JavaScript puro

Define lo que nos gustaría poder usar. styles-and-defs.svg :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style type="text/css" >
    <![CDATA[

    .blue { fill: blue; }

    ]]>
    </style>

    <defs>
        <rect id="rectangle" class="blue" width="50" height="50" />
    </defs>
</svg>

Utilice la geometría creada anteriormente y cargue su definición. parent.svg :

<svg version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="420" height="120">

    <use xlink:href="#rectangle" x="10" y="10" />

    <script><![CDATA[

        /** When the document is ready, this self-executing function will be run. **/
        (function() {

            var ajax = new XMLHttpRequest();
            ajax.open("GET", "styles-and-defs.svg", true);
            ajax.send();

            /**
             * Append the external SVG to this very SVG.
             *
             * Notice the use of an SVG selector on the document derived from the AJAX result.
             *  This is because the full document cannot be included directly into the SVG.
             *  Trying to include to do so would result in:
             *      `HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy` in Firefox;
             *      `Nodes of type ''#document'' may not be inserted inside nodes of type ''svg''.` in Chrome.
             */
            ajax.onload = function(e) {
                var parser = new DOMParser();
                var ajaxdoc = parser.parseFromString( ajax.responseText, "image/svg+xml" );
                document.getElementsByTagName(''svg'')[0].appendChild( ajaxdoc.getElementsByTagName(''svg'')[0] );
            }

        })();   /* END (anonymous function) */

    ]]></script>
</svg>

Esto responde a la OP.

En HTML

El mismo enfoque básico que en SVG puro:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        Load external SVG (HTML)
    </title>
    <meta name="author" content="Fabien Snauwaert">
</head>

<body>

    <svg version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    width="420" height="120">
        <use xlink:href="#rectangle" x="10" y="10"  />
    </svg>

<script>

    /** When the document is ready, this self-executing function will be run. **/
    (function() {

        var ajax = new XMLHttpRequest();
        ajax.open("GET", "styles-and-defs.svg", true);
        ajax.send();

        /**
         * Append the external SVG to this very SVG.
         *
         * Notice the use of an SVG selector on the document derived from the AJAX result.
         *  This is because the full cannot be included directly into the SVG.
         *  Trying to include to do so would result in:
         *      `HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy` in Firefox;
         *      `Nodes of type ''#document'' may not be inserted inside nodes of type ''svg''.` in Chrome.
         */
        ajax.onload = function(e) {
            var parser = new DOMParser();
            var ajaxdoc = parser.parseFromString( ajax.responseText, "image/svg+xml" );
            document.getElementsByTagName(''body'')[0].appendChild( ajaxdoc.getElementsByTagName(''svg'')[0] );
        }

    })();   /* END (anonymous function) */

</script>

</body>
</html>

Por supuesto, podría usar jQuery (o por qué no el excelente D3.js ) para cargar el archivo.

Observaciones

• <defs> el uso de <defs> . Creo que esto es lo bueno de tener un SVG externo, puedes mantener todo ordenado y organizado. (Y sin él, estaríamos mostrando el contenido dos veces).
• Me deshice de style.css y simplemente coloqué el CSS dentro del archivo styles-and-defs.
• Si, en la versión HTML, observa un espacio entre el SVG principal y los bordes de la ventana, esto se debe a que el SVG "invisible" (con los estilos y la definición), como cualquier otro SVG, es un elemento en inline . Para deshacerse de esta brecha, simplemente configure style="display: block;" en que SVG.
• Descarga todos los ejemplos aquí .

SVG es genial, pero puede parecer muy poco compatible, mientras que permite algunas grandes cosas. Espero que esto ayude a algunas personas por ahí.

Probado OK en OS X 10.12.6 en:

• Firefox 59.0.2
• Chrome 66.0.3359.139
• Safari 11.0.1

Answer 3

Intenta hacerlo de esta manera:

La plaza:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000">
    <rect x="558.5" y="570" width="5" height="5" id="rectangle" />
</svg>

Úsalo:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000">
    <use xlink:href="another.svg#rectangle" class="blue"/>
</svg>

Answer 4

<svg> elemento <svg> no tiene el atributo xlink:href . Si necesita incluir una imagen externa, use el elemento <image> .