SVG中的style元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/31/SVG%E4%B8%AD%E7%9A%84style%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

在 SVG 中嵌入样式表

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <style>
        rect {
            fill: #00f;
        }
    </style>
    <rect x="10" y="10" width="100" height="100" />
</svg>

attribute

media

媒体查询

如果定义了media，则在条件满足时应用对应的<style>
如果没有定义media，则无条件应用对应的<style>

示例：>=600px时矩形为红色

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <style media="(min-width: 600px)">
        rect {
            fill: #f00;
        }
    </style>
    <rect x="10" y="10" width="100" height="100" />
</svg>