您的位置：首页 > 其它

【概念】SVG(2)

2016-04-26 19:09 357 查看

Style

<svgwidth="200"height="200"xmlns="http://www.w3.org/2000/svg"version="1.1">
<defs>
<styletype="text/css"><![CDATA[
#MyRect:hover{
stroke:black;
fill:red;
}
]]></style>
</defs>
<rectx="10"height="180"y="10"width="180"id="MyRect"/>
</svg>

样式分离啊，注意上面有个hover，感觉像在使用css一样~

下面是内嵌的，缺点就是木有样式和行为分离：

<rectx="10"height="180"y="10"width="180"style="stroke:black;fill:red;"/>

最后从外面导入样式

<?xmlversion="1.0"standalone="no"?>
<?xml-stylesheettype="text/css"href="style.css"?>

<svgwidth="200"height="150"xmlns="http://www.w3.org/2000/svg"version="1.1">
<rectheight="10"width="10"id="MyRect"/>
</svg>

在style.css文件里面写上

#MyRect{
fill:red;
stroke:black;
}

Gradients

一个gradient就是从一个颜色到另一个颜色的平滑转变。类型：

Linear

Radial

Linear

<svgheight="150"width="400">
<defs>
<linearGradientid="grad1"x1="0%"y1="0%"x2="100%"y2="0%">
<stopoffset="0%"style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stopoffset="100%"style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/>
</svg>

执行步骤:

<linearGradient>标签上的id为每一个gradient定义了与众不同的名字

<linearGradient>中的x1,x2,y1,y2定义了渐变开始和结束的位置

渐变的颜色范围可以是一种亦或多种颜色。每一种颜色都由<stop>标签指定颜色的开始和结束位置。

ellipse中的fill属性将gradient和ellipse连接起来，也就是渐变作为填充显示在ellipse中

RadialGradient

<radialGradient>元素用来定义一个圆圈渐变（aradialgradient）.

<radialGradient>元素必须内嵌在<defs>标签中.<defs>标签用于简短的定义以及包含了一些特殊元素的定义（例如gradients）

<svgheight="150"width="500">
<defs>
<radialGradientid="grad1"cx="50%"cy="50%"r="50%"fx="50%"fy="50%">
<stopoffset="0%"style="stop-color:rgb(255,255,255);
stop-opacity:0"/>
<stopoffset="100%"style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipsecx="200"cy="70"rx="85"ry="55"fill="url(#grad1)"/>
</svg>

代码解释:

<radialGradient>标签上的id为渐变定义了一个独一无二的名字

cx,cy和r定义了最外围的圆，fx和fy定义了内部的圆

渐变的颜色范围可以包括两个亦或多个颜色。每个颜色都由<stop>标签定义了颜色的开始和结束。

利用ellipse中个fill属性，将渐变作为填充颜色填充到ellipse中

如果不设置fx和fy则默认和cx，cy定义是一样的。

<radialGradientid="grad1"cx="50%"cy="50%"r="50%"fx="0.2"fy="50%">

<radialGradientid="grad1"cx="0.2"cy="50%"r="50%"fx="0.2"fy="50%"spreadMethod="pad">

可以看见默认的设置是spreadMethod="pad"，也就是填充

<radialGradientid="grad1"cx="0.2"cy="50%"r="50%"fx="0.2"fy="50%"spreadMethod="repeat">

注意上面是repeat，重复白，蓝渐变

<radialGradientid="grad1"cx="0.2"cy="50%"r="50%"fx="0.2"fy="50%"spreadMethod="reflect">

上面的reflect，和repeat呈现的方式相反，是蓝，白

Pattern

<svgwidth="200"height="200">
<defs>
<patternid="Pattern"x="0"y="0"width=".25"height=".25">
<rectx="0"y="0"width="50"height="50"fill="skyblue"/>
<rectx="0"y="0"width="25"height="25"fill="yellow"/>
</pattern>
</defs>
<rectfill="url(#Pattern)"stroke="black"x="0"y="0"width="200"height="200"/>
</svg>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航