在SVG中使用样式

<!-- 引入外部样式表 -->
<?xml-stylesheet type="text/css" href="ext_style.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="200px" height="200px" viewBox="0 0 200 200">
    <!-- 使用内联样式 -->
    <circle cx="20" cy="20" r="10"
            style="stroke:black;stroke-width:1.5;fill:blue;fill-opacity:0.6"/>
    <!-- 内部样式表-->
    <defs>
        <style type="text/css">
            <![CDATA[
                circle {
                    fill:#ffc;
                    stroke:blue;
                    stroke-width:2;
                    stroke-dasharray:5.3;
                }
            ]]>
        </style>
    </defs>
    <circle cx="50" cy="20" r="10"/>
    <circle cx="80" cy="20" r="10"/>
    <circle cx="110" cy="20" r="10"
            style="stroke:black;stroke-width:1.5;fill:blue;fill-opacity:0.6"/>

    <line x1="20" y1="50" x2="150" y2="50"/>

    <rect x="20" y="80" width="80" height="50" fill="red" stroke="black" stroke-width="2"/>
</svg>

posted @ 2022-02-01 21:31  xl4ng  阅读(188)  评论(0编辑  收藏  举报