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
fill:red