文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > H5教程 > 正文

SVG基础|绘制SVG矩形

php中文网
发布： 2016-05-17 09:07:33
原创
2433人浏览过
1.jpg

　　一个元素代表一个SVG矩形。通过这个元素你可以画出不同宽度，不同高度，以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。

　　一个SVG矩形的简单例子

　　下面是一个绘制SVG矩形的简单例子。


  3.    
  4.         style="stroke:#006600; fill: #00cc00"/>

    7.       
复制代码

　　SVG矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。

　　SVG矩形的尺寸由width和height属性决定。

　　style属性允许你为矩形设置附加的样式，如描边色，描边宽度和填充色等。

　　下面的图形是上面代码的返回结果：

2.jpg

　　圆角矩形

　　我们也可以绘制圆角的SVG矩形。rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度，ry属性则决定圆角的高度。下面的例子中，三个矩形的圆角分别被设置为5像素、10像素和15像素，请注意观察他们各自圆角的大小变化。


  3.    
  4.           rx="5" ry="5"
  5.           style="stroke:#006600; fill: #00cc00"/>
  6.    
  7.           rx="10" ry="10"
  8.           style="stroke:#006600; fill: #00cc00"/>
  9.    
  10.           rx="15" ry="15"
  11.           style="stroke:#006600; fill: #00cc00"/>
    13.    
复制代码

　　上面的代码的返回结果如下：

3.jpg

　　上面的例子中，三个圆角矩形的rx和ry值都是相同的。如果你单独设置了rx的值，那么ry的值和rx相同。这是定义SVG圆角矩形的简写方式。

　　下面的两个例子中，rx的值都设置为10像素，但是ry的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。


  3.    
  4.           rx="10" ry="5"
  5.           style="stroke:#006600; fill: #00cc00"/>
  6.    
  7.           rx="10" ry="15"
  8.           style="stroke:#006600; fill: #00cc00"/>
    10.    
复制代码

　　上面的代码的返回结果如下：

4.jpg

　　描边矩形

　　你可以使用stroke属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色，边框的宽度为3像素。
  2.       style="stroke: #009900;
  3.              stroke-width: 3;
  4.              fill: none;
  5.       "
  6.       />      
复制代码

　　上面的代码的返回结果如下：

5.jpg

　　你还可以使用stroke-dasharray属性将矩形的边框设置为虚线。看下面的例子：
  2.       style="stroke: #009900;
  3.              stroke-width: 3;
  4.              stroke-dasharray: 10 5;
  5.              fill: none;
  6.             "
  7.         />      
复制代码

　　上面的代码的返回结果如下：

6.jpg

　　填充矩形

　　你可以使用fill属性来为SVG矩形填充颜色。例如将矩形的颜色填充为none。
  2.       style="stroke: #009900;
  3.              fill: none;
  4.             "
  5.         />         
复制代码

　　这时，SVG矩形的填充色将和浏览器的页面颜色一样。

7.jpg

　　你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。
  2.       style="stroke: #009900;
  3.              fill: #33ff33;
  4.             "
  5.         />     
复制代码
8.jpg
　　最后，你可以用fill-opacity属性来设置填充矩形的透明度。下面的例子中，两个句子部分叠加在一起，上面的矩形设置为50%的填充透明度。
  2.       style="stroke: #009900;
  3.          fill: #33ff33;
  4.         "
  5.         />
  7.       style="stroke: #000099;
  8.          fill: #3333ff;
  9.          fill-opacity: 0.5;
  10.         "
  11.         />            
复制代码

　　上面的代码的返回结果如下：

9.jpg

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506031964.html


最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：SVG基础|SVG图形描边 下一篇：HTML5 CANVAS：绘制阴影和填充模式
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
H5页面制作中如何优化SEO效果 H5页面SEO优化必备技巧 H5页面需要SEO优化以提升搜索排名，关键做法包括：1.使用语义化HTML标签如、等，帮助搜索引擎识别结构并提升内容权重；2.为每页设置独立和，标题控制在60字内，描述简洁说明内容；3.优化图片与文字，所有图片添加alt属性描述、避免用图片替代核心文字，并合理命名文件；4.控制加载速度，压缩图片、使用懒加载、减少JS请求，确保首屏加载不超过2秒，通过Lighthouse工具检测优化效果。
2025-06-12 11:30:02
388
H5页面如何实现暗黑模式切换 一键切换暗黑模式的实现方案 要实现移动端H5页面的一键切换暗黑模式，核心在于动态控制页面主题样式并持久化用户偏好设置，主要方案如下：1.使用CSS变量+JavaScript控制主题，通过定义两套颜色变量并用JS切换类名或变量值，实现主题切换；2.利用prefers-color-scheme媒体查询自动适配系统偏好，默认跟随系统设置，但需配合JS方案使用；3.使用localStorage存储主题状态，确保用户选择持久化，并在多页面间同步状态；4.避免样式冲突，统一使用CSS变量管理颜色，合理组织代码结构，并注意图片图标的适配
2025-06-11 08:24:02
723
H5页面制作中如何防止内容被复制 内容防复制保护措施大全 H5页面防复制可通过多种技术手段提高门槛。1.禁用右键菜单和文本选择，通过JavaScript阻止默认行为并配合CSS控制选中效果；2.图片防盗处理，使用背景图、水印、Base64编码及防盗链策略；3.使用SVG或Canvas展示关键文字内容，结合自定义字体混淆字形；4.加入反调试机制，检测开发者工具、监控DOM变化与剪贴板事件；5.内容分块加载并动态渲染，通过接口获取数据并前端拼接解密，从而有效提升内容保护能力。
2025-06-10 08:18:01
557
H5页面制作中如何压缩资源文件大小 资源压缩使H5体积减少50% H5页面压缩资源文件可通过优化图片、精简代码、使用字体图标及启用传输压缩实现。一、图片资源方面，优先使用WebP格式，配合响应式方案并用TinyPNG等工具无损压缩；二、JS/CSS代码合并精简，去除冗余内容，并按需引入轻量级库或延迟加载非关键脚本；三、采用字体图标替代图片图标，减少HTTP请求，图标较少时可考虑内联SVG；四、服务器端开启GZIP或Brotli压缩，减少文本类资源传输体积。以上方法组合使用，可显著减小页面体积并提升加载速度。
2025-06-09 10:21:01
158
H5页面如何实现表单数据验证功能 前端表单验证的完整解决方案 在H5页面中实现表单数据验证功能，主要通过HTML5内置属性与JavaScript配合完成。1.使用HTML5原生验证属性如required、pattern、min/max、type等，可快速实现基础验证，但样式和提示信息受限；2.结合JavaScript编写自定义验证逻辑，在提交时逐项判断字段规则，并动态显示错误提示，提升灵活性；3.通过oninput或onblur事件实现即时验证，结合样式反馈增强用户体验；4.注意前端验证不能替代后端校验，需防范恶意绕过，同时关注移动端适配、多语言支持及复杂
2025-06-08 11:00:02
383
H5页面制作中如何优化字体渲染效果 字体渲染优化的专业技巧 在H5页面中优化字体渲染效果可通过四个关键点实现：1.选择合适字体格式与来源，优先使用系统默认或Web安全字体，合理使用GoogleFonts并控制变体数量；2.设置合适的字号与行高，正文字号不小于14px，行高建议为字号的1.5~1.6倍，避免小字号加粗体组合；3.利用CSS属性如-webkit-font-smoothing和text-rendering提升清晰度，并适当触发GPU加速；4.注意跨平台一致性问题，了解iOS与Android渲染差异，在设计阶段测试多平台效果以选择兼容性方案。掌握
2025-06-07 13:36:02
219
H5页面如何实现滚动视差特效 炫酷视差滚动效果实现指南 实现H5页面滚动视差特效的关键在于让不同元素在滚动时产生速度或位置差异，从而营造层次感和动态效果。1.利用CSS实现基础视差滚动，通过设置background-attachment:fixed;控制背景图固定不动，结合多个不同滚动速度的层模拟3D纵深感，但需注意移动端兼容性问题。2.使用JavaScript监听滚动事件并动态修改元素样式，例如通过translateY结合滚动偏移系数（如0.5、0.3、0.7）实现更灵活的视差效果，同时要进行节流处理以优化性能。3.借助视差滚动库如ScrollMa
2025-06-06 09:00:03
450
H5页面如何实现用户行为数据追踪 用户操作轨迹记录最佳实践方案 H5页面实现用户行为数据追踪的核心在于埋点采集和数据上报。一、选择合适的埋点方式：手动埋点精准可控但维护成本高；自动埋点适合快速上线但可能采集无效数据；可视化埋点灵活，建议初期采用自动埋点+手动补充。二、设计合理的数据结构：包含事件类型、页面URL、触发元素、时间戳、用户标识、设备信息及自定义参数，确保字段统一规范。三、优化数据上报策略：实时上报及时但影响性能；批量上报适合移动端；离线存储+重试机制保障数据完整性，建议优先使用批量上报并结合防重机制，重要事件单独立即上报。四、注意性能与隐私问题：
2025-06-05 18:12:01
987
免费的 H5 前端开发工具有推荐吗 推荐的免费H5前端开发工具包括：1.VisualStudioCode，功能强大，支持Emmet语法；2.CodePen，适合快速原型设计和分享代码；3.JSFiddle，界面简洁，适合快速测试代码片段；4.Brackets，内置实时预览功能，各工具各有优劣，选择适合自己的工具是关键。
2025-06-04 19:39:01
193
零基础如何学习 H5 前端开发 零基础学习H5前端开发需要掌握HTML5、CSS3和JavaScript。1.HTML5用于构建网页结构。2.CSS3负责网页的样式和布局。3.JavaScript赋予网页动态交互的能力，通过学习这些技术并坚持实践，你可以逐步掌握H5前端开发。
2025-06-02 15:45:01
183
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部