SVG media Attribute
The media attribute shows a media query that must be matched for a style sheet to apply. Only <style> element is using this attribute.
Syntax:
<style media="media-query-list">
// Styling the element
</style>Attribute Values: The media attribute accepts the values mentioned above and described below:
- media-query-list: This value holds a media query which lets the stylesheet to be applied on the element.
Below examples illustrate the use of media attribute.
Example 1:
<!DOCTYPE html><html> <body> <h1 style="margin-left: -8px; font-size: 25px; color: green;"> GeeksforGeeks </h1> <svg viewBox="0 10 1440 220" <!-- Styling rect element when screen size is greater than 800px --> <style> rect { fill: yellowgreen; } </style> <!-- Styling rect element when screen size is greater than 800px and using media attribute--> <style media="all and (min-width: 800px)"> rect { fill: green; } </style> <!-- Defining rectangular shape SVG --> <rect y="20" width="200" height="200" /> </svg></body> </html> |
Output:
Example 2:
<!DOCTYPE html><html> <body> <h1 style="margin-left: -8px; color: green; font-size: 25px;"> GeeksforGeeks </h1> <svg viewBox="0 2 1440 220" <!-- Styling rect element when screen size is greater than 800px --> <style> circle { fill: yellowgreen; } </style> <!-- Styling rect element when screen size is greater than 800px and using media attribute--> <style media="all and (min-width: 800px)"> circle { fill: green; } </style> <!-- Defining circular shape SVG --> <circle r="100" cx="100" cy="100" /> </svg></body> </html> |
Output:
Please Login to comment...