基本的SVG样式属性
SVG的样式属性和CSS的语法非常接近,有时甚至是一样的,经常会照成一些使用上的混乱。
注意,我们在这里讨论的是用于SVG代码本身出现的规则,而不是SVG被嵌入网页后被附加上去的规则样式。然而,如果你想从CSS属性来了解SVG,比较他们的语法规则是一种有效果的方法。
SVG | 等效的CSS |
fill | background-color或color |
fill-opacity | background-color或color设置rgba/hsla |
opacity | opacity |
stroke | border-color |
stroke-width | border-thickness |
stroke-opacity | border-color设置rgba |
rx, ry | border-radius |
下面的属性在SVG和CSS中是一样的,只是在SVG的transformations和dimensions中稍有区别:
font-family
,font-size
,font-style
,font-variant
和font-weight
width
和height
scale
,rotate
,skew
大多数的这些属性可以作为SVG样式规则的一部分,如果你想实现类似CSS背景色的效果,这可能是最简单的实现方法。来看下面的一段SVG代码:
<svg width="300" height="170" style="float: left"><rect x="10" y="5" rx="15" width="280" height="160" style="fill: #a73838; fill-opacity: 0.65; stroke: #000; stroke-width: 10; stroke-dasharray: 22, 2, 2; ry: 15;"/><text x="130" y="115" fill="yellow" font-size="100" style="font-family: Blue Highway, Arial Black, sans-serif; stroke: black; stroke-width: 2;">SVG</text>
</svg>
<p>Test paragraph</p>
你可以看到下边的结果:
CSS和SVG之间的渐变方式是有所不同的,你可以自行去查阅这方面的资料。
注意,我们在SVG中不用指定单位,至少上面的代码中就没有指定,它默认的单位是像素。
看到这里,你不要认为SVG的规则样式是CSS样式的更简单的表现形式。SVG提供了很多控制方式,如上所述,SVG可以绘制出各种形式的虚线,而且不像CSS3的border-image那样复杂。看到这里你应该可以开始给你自己的SVG添加样式了。
更多参考:
SVG 入门教程系列列表
SVG动画入门
SVG动画入门(二)
SVG技术入门:线条动画实现原理
如何使用CSS来修改SVG原点和制作SVG动画
纯CSS实现帅气的SVG路径描边动画效果
SVG矢量绘图 path路径详解(基本画法)
SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)
Web流程图绘制使用raphael
本文转自:基本的SVG样式属性
基本的SVG样式属性相关推荐
- python中plot的plt.text_用Python进行数据可视化的第一步,全面详解matplotlib中样式属性...
上篇内容我们详细了解了Python使用matplotlib绘制一个复杂的正弦函数的方法(参见),上篇内容我们提到了一个属性'b-',简单介绍了它是用来设置线条颜色和样式的属性.今天,我们详细了解一下P ...
- 浏览器兼容--条件样式,选择符前缀,样式属性前缀
浏览器兼容--条件样式,选择符前缀,样式属性前缀 2012-12-05 09:20 by greenal, 1570 阅读, 0 评论, 收藏, 编辑 原文地址-- http://www.w3cplu ...
- jQuery CSS 样式属性
css(name) 访问第一个匹配元素的样式属性. 返回值 : String 参数 : name (String) : 要访问的属性名称 示例 : 取得第一个段落的color样式属性的值. jQuer ...
- 标签的属性和样式属性有什么区别
首先我们来说一点: 网页制作标准是标签跟样式分离,比如 <table width="200px"></table> 这里面的width属于标签属性,标准是尽 ...
- ASP.NET2.0服务器控件之类型化样式属性
实现类型化样式属性的方法 继承自Style类的类称为类型化样式.Style类可以由控件开发人员来扩展,创建一个自定义类型化样式,它重写或者添加Style类的属性.服务器控件也可以把自定义类型化样式作为 ...
- 【温故知新】CSS学习笔记(字体样式属性)附加篇
CSS字体样式属性 目录 CSS字体样式属性 一.font属性 二.color属性 三.line-height 行间距(行高) 四.text-align 水平对齐方式 五.text-indent 首行 ...
- 【温故知新】CSS学习笔记(字体样式属性)
CSS字体样式属性 一.font-size:字号大小 该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px. 相对长度单位 说明 em ...
- 浏览器兼容--条件样式,选择符前缀,样式属性前缀(转)
浏览器兼容--条件样式,选择符前缀,样式属性前缀 2012-12-05 09:20 by greenal, 1570 阅读, 0 评论, 收藏, 编辑 原文地址-- http://www.w3cplu ...
- html设置返回的样式,jQuery设置或返回元素样式属性。
jQuery css() 方法css() 方法设置或返回被选元素的一个或多个样式属性. 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); ...
最新文章
- Snap和Flatpak 通吃所有发行版的打包方式。
- 开发人员改变世界的初心
- python多久学会自学-python自学多久
- 5分钟搞定android混淆
- 美国罪案故事第一季/全集American Crime Story迅雷下载
- scrapy爬虫框架windows下的安装问题
- 我们为什么活得这么累
- 基于JavaScript实现网页计算器
- computed用发_Vue中的computed属性和nextTick方法
- wps计算机一级考试试题300,计算机一级考试WPS试题及答案
- Caused by: java.net.UnknownHostException: localhost.localdomain: localhost.localdomain的问题解决...
- 对抗训练+FGSM, FGM理解与详解
- 浅谈Foxmail邮件迁移
- 固定翼航模及四旋翼无人机基础
- 保研面试/考研复试英语口语常见问题整理
- 深度学习目前主要有哪些研究方向?
- PigGo配置Gitee仓库出现“Not Found Project“的错误解决方案
- 项目总结之Basler相机的调用
- MongoDB数据库增删改查基本使用
- 组合导航的介绍和应用
热门文章
- C++语言基础 —— 函数
- 小b和回文数(51Nod-2483)
- Median(POJ-3579)
- 周末舞会(信息学奥赛一本通-T1332)
- Telephone Wire(POJ-3612)
- 分离整数的各个数(信息学奥赛一本通-T1088)
- 22 CO配置-控制-产品成本控制-成本对象控制-检查制造订单 (PP) 的评估变式
- vba vbscript.regexp加载dll错误_TFS金钥匙系列04期:WPS 加载项之“团队”功能
- SAGAN原理及代码(B站详解,很值得一看)
- AngularJS-Hello World