foreignObject styling not working
I don't know if this is the only style that doesn't work.
I used this code from MDN to test it :
https://codepen.io/Supersudo/pen/MWYYeba
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style> .test { color: white; font: 18px serif; height: 100px; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <foreignObject x="20" y="20" width="160" height="160" style="border: 10px solid blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</foreignObject>
</svg>
Firefox doesn't display the blue border around the div while chromium does.
I don't know if this is the only style that doesn't work.
I used this code from MDN to test it :
https://codepen.io/Supersudo/pen/MWYYeba
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
.test {
color: white;
font: 18px serif;
height: 100px;
overflow: auto;
}
</style>
<polygon points="5,5 195,10 185,185 10,195" />
<foreignObject x="20" y="20" width="160" height="160" style="border: 10px solid blue">
<div xmlns="http://www.w3.org/1999/xhtml" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</foreignObject>
</svg>
Firefox doesn't display the blue border around the div while chromium does.
Modified