The media attribute specifies a media query that must be matched for a style sheet to apply.
You can use this attribute with the following SVG elements:
The media attribute specifies a media query that must be matched for a style sheet to apply.
You can use this attribute with the following SVG elements:
<svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">Resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg>
| Value | <media-query-list> |
|---|---|
| Default value | all |
| Animatable | Yes |
<media-query-list>This value holds a media query that needs to match in order for the style sheet to be applied.
If not specified, the style sheet is applied unconditionally.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
media |
No | No | No | No | No | No | No | No | No | No | No | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/media