SVG基础

最新推荐文章于 2025-08-28 18:36:58 发布

转载最新推荐文章于 2025-08-28 18:36:58 发布 · 67 阅读

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/warmcafe/blog/114154

因为d3.js在渲染图形为可伸缩矢量图形（Scalable Vector Graphics，SVG）时能够展现最好水平，所以简单学习了一下SVG。SVG是一个基于文本的图形格式，它的代码可以直接包含在HTML文档中。除IE（IE8及更老的版本）之外的现代浏览器均支持SVG。

用SVG可以绘制下面这样的矢量图：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
    <style type="text/css">
        svg .pumpkin {
            fill: yellow;
            stroke: orange;
            stroke-width: 5;
        }
    </style>
    </head>
    <body>
        <svg width="500" height="500">
        <rect x="0" y="0" width="500" height="50" />
        <circle cx="250" cy="200" r="25" fill="yellow" stroke="orange" stroke-width="5" />
        <ellipse cx="100" cy="100" rx="100" ry="25" class="pumpkin"/>
        <line x1="0" y1="50" x2="500" y2="150" stroke="black" />
        <text x="250" y="150">Easy</text>
        <text x="250" y="250" font-family="sans-serif" font-size="25" fill="gray">Easy</text>
        </svg>
    </body>
</html>

所有的图形必须包含在svg的画布中。rect、circle、ellipse、line分别用来绘制矩形、圆形、椭圆和直线。text用来绘制文字。这些图形可以直接在属性中设置其样式，也可以用css+class的方式来设置。但是SVG不支持css中z-index属性，即SVG中的图形没有深度和层次感，它们会相互覆盖，后绘制的图形会覆盖先绘制的图形，因此SVG中图形的绘制顺序十分重要。

SVG中实现透明的方法有两种，一是使用RGB的颜色通道，二是设置opacity的值。

<circle cx="325" cy="325" r="20" fill="rgba(255, 0, 0, 0.1)"/>

rgba中透明通道的取值在0~1之间。1是不透明，0是全透明。

<circle cx="325" cy="325" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.3"/>

opacity的取值同上。

如果既有rgba透明通道，又设置了opacity，则透明度为两数值相乘后的结果。

参考文献：

Interactive Data Visualization for the Web

转载于:https://my.oschina.net/warmcafe/blog/114154