X
Tap here to go to the mobile version of the site.

منتدى الدعم

foreignObject styling not working

  • No replies
  • 1 has this problem
Posted

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 by Mark Lough

Quote

Additional System Details

Application

  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:70.0) Gecko/20100101 Firefox/70.0

More Information

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.