3

Intento acceder al contenido de un tag <object> que carga un archivo. En lo especifico, deseo acceder al id de algunos de sus elementos y he probado a hacerlo con CSS y con JavaScript, pero nada parece funcionar. No logro acceder a los id o clases de los elementos que se cargan desde el archivo.

El problema persiste a pesar del tipo de archivo utilizado, he probado con archivos html y svg.


Etiqueta <object>:

<object id="obj" data="test.svg" type="image/svg+xml"></object>

Archivo SVG:

<svg width="680" height="370" style="border-radius:30px" version="1.1" viewBox="0 0 179.91 97.897" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="test" d="m9.2398 47.875 22.601 6.4716 69.367 0.0251c0.68665 2.51e-4 1.4406-0.39775 1.4217-1.5326l-3.7e-4 -25.974-74.08-17.624z" fill="#333" opacity=".5" style="mix-blend-mode:color-dodge"/>
</svg>

JavaScript con el que intento acceder a los id:

<!-- jQuery full con ajax -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<script>
    $(window).on('load', function(){ 
        console.log( document.getElementById('test') )
        // Devuelve: null
    });

    $(document).ready(function(){
        console.log( document.getElementById('test') )
        // Devuelve: null
        
        console.log( $('#obj').contentDocument )
        // Devuelve: undefined
    });
</script>

CSS tampoco detecta el id:

#obj {color: red !important} /* No funciona */
#test {fill: red} /* No funciona */

La etiqueta <embed src="..." \> se comporta de la misma manera

10
  • Para el color prueba a poner en el CSS fill:red
    – Aitor
    Commented el 7 ene. 2021 a las 12:23
  • Ya lo intenté y no funciona. Nota que también intenté con un archivo html. El problema es que no consigo obtener el elemento usando el ID o la Clase. Commented el 7 ene. 2021 a las 12:36
  • Lo que quiero hacer es mucho más complejo que asignar un color, necesito que tanto javascript como css puedan acceder a esos id para animar un archivo svg. Commented el 7 ene. 2021 a las 12:41
  • ¿esto soluciona tu duda?
    – Rodrigo
    Commented el 7 ene. 2021 a las 13:35
  • 1
    Cargar el svg desde javascript te serviría ? algo asi: jsfiddle.net/r2svaLk6
    – Israel
    Commented el 7 ene. 2021 a las 14:06

1 respuesta 1

1

Siempre y cuando el SVG este hosteado en el mismo dominio que la página, podes hacerlo así:

  • Primero busca el object en el documento
  • Luego accede al contentDocument del object
  • Finalmente busca por id el elemento dentro del contentDocument

Ejemplo:

$(function() {
    let element = document.getElementById('obj').contentDocument.getElementById('test');
    console.log(element);
});

PD: te recomiendo leer ¿Cuál es la diferencia entre window.onload y $(document).ready()?

5
  • Gracias, lo voy a probar. Y para acceder al ID con CSS ¿sería posible o tendría que aplicar los estilos con js? Commented el 8 ene. 2021 a las 13:34
  • Funciona de maravillas. Ahora queda solo mi duda sobre el CSS. Commented el 8 ene. 2021 a las 14:03
  • Si queres modificar el SVG solo usando CSS, el SVG tendría que estar incrustado en el página, es decir, no deberías usar object
    – Marcos
    Commented el 8 ene. 2021 a las 14:15
  • No quiero usar solo CSS, pero con js no se como crear animaciones en CSS, no se siquiera si sea posible. Commented el 8 ene. 2021 a las 14:43
  • 1
    Es una buena pregunta que podes publicar, asi la comunidad puede responderte. La respuesta corta es, si, si se puede. Mas info aca
    – Marcos
    Commented el 8 ene. 2021 a las 14:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.