SVG图案和渐变填充

最新推荐文章于 2024-08-02 22:32:22 发布

AryaoO

最新推荐文章于 2024-08-02 22:32:22 发布

阅读量7.5k

点赞数

分类专栏：前端开发——D3 前端开发基础文章标签： svg pattern linearGradient radialGradient

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51659146

版权

本文介绍了SVG中的图案填充和渐变色填充。图案填充涉及patternUnits和patternContentUnits属性，以及viewBox用于缩放图案。渐变填充包括线性渐变和径向渐变，共用属性如<stop>元素的offset和stop-color，以及<spreadMethod>属性。线性渐变通过x1、y1、x2、y2定义方向，径向渐变通过cx、cy、r定义圆心和半径，可调整fx、fy改变焦点。

摘要由CSDN通过智能技术生成

在基本图形绘制中，我们只用了纯色为图形对象填充颜色和绘制轮廓。其实，出来纯色以外，我们还可以使用图案和渐变来填充图形或者绘制图形轮廓。

一、图案填充：

我们首先来看图案填充，要使用图案，首先要定义一个水平或垂直方向重复的图形对象，然后用它填充另一个对象或者作为画笔使用。这个图形对象称作tile（瓷砖），因为使用图案填充对象的行为很想在地面上铺瓷砖的过程。

<body>
<svg width="1000" height="1000" xmlns ="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="strip" patternUnits="userSpaceOnUse" x="0" y="0" width="6" height="6">
            <path d="M0 0 6 0" style="stroke: black;fill: none"/>
        </pattern>
        <pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="36" height="36" >
            <circle cx="12" cy="12" r=