SVG 例子

最新推荐文章于 2024-07-24 16:20:17 发布
最新推荐文章于 2024-07-24 16:20:17 发布
阅读量900 收藏
点赞数
分类专栏： Web开发 文章标签： javascript html5 图形 url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianping_shen/article/details/6080284
版权

这只是一个入门的实力，但无不展示了SVG足够的强大。如果再配合其他的技术，诸如javascript等，可以想象很多超难的图形都能在网页上展现出来。

 

Step1. //HTML5.svg

 

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<desc>Reusing items</desc>
  <defs>
     <polygon id="lens" points="65,50 185,50 185,75, 150,100 100,100 65,75" fill="none" stroke="purple" stroke-width="4"/>
     <radialGradient id="irisGradient">
        <stop offset="25%" stop-color="green" />
        <stop offset="100%" stop-color="dodgerblue" />
     </radialGradient>
     <g id="eye">
        <ellipse cy="50" rx="50" ry="25" fill="none" stroke="black"/>
        <circle cy="50" r="25"/>
        <circle cy="50" r="10" fill="black"/>
     </g>
  </defs>
  <g>
    <use xlink:href="#eye" x="125" fill="url(#irisGradient)"/>
    <use xlink:href="#eye" x="250" fill="dodgerblue"/>     
    <use xlink:href="#lens"/>
    <use xlink:href="#lens" x="125"/>
    <line x1="65" y1="50" x2="310" y2="50" stroke="plum" stroke-width="2"/>           
  </g>
</svg>

 

Step2. //HTM5.jsp

 

<html>
<head>
<title>Hello World!</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<!-- 下一句嵌入SVG内容 -->
<embed src="HTML5.svg">　
</body>
</html>

 

Step3.  //http://127.0.0.1:8080/HTML5.jsp

 

小瓶盖的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG实践
weixin_45681557的博客
10-16 222
应用场景SVG 图表 图标 icon 动效 矢量图 直线 矩形 <rect x=“50” y=“50” width=“100” height=“100” rx="10"ry=“20”> 圆形 椭圆 折线 多边形 </ polygon> ⽂本 hello,world <svg width= "1000px" height= "500px"> ...
SVG的使用
weixin_54443782的博客
07-16 737
第一个标签是绘制一个可以闭口的盒子，里面的值和最上面的差不多只不过多了一个回到原点的值，最下面的标签是绘制直线，值从左到右是x的初始值，y的初始值，x的重点值，y的终点值。这是一个格式效果如上图所示，rect这个标签是用来设置成正方形，里面的值,x和y是起始位置的xy坐标，width和height是控制正方形的宽和高，fill是填充的颜色，stroke是边的颜色，stroke-width是描边的宽度，rx是以多少为半径画圆，还有一个ry意思是相同的，这两个都加上就可以绘制出椭圆形。好可以绘制直线和折线。..
svg 使用例子
FancierX的专栏
08-16 240
svg 使用例子 无标题文档 #div1{ width:780px; height:400px; background:url(img/bg.jpg) no-repeat; margin:20px auto; overflow:hidden;} body{ background:black;} //780/2 -> x : 390 //400/2 -> y : 200
html svg 文件例子,SVG 实例
weixin_39760619的博客
06-09 141
SVG 实例简单的 SVG 实例一个简单的SVG图形例子：这里是SVG文件(SVG文件的保存与SVG扩展)：/p>"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">stroke-width="2" fill="red" />SVG 代码解析：第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文...
最全的SVG例子Demo分享
12-02
在提供的“最全的SVG例子Demo分享”压缩包中，可能包含了各种SVG图形的示例和应用，涵盖了基础形状、路径、渐变、滤镜、动画等多个方面。这些例子可以帮助学习者深入了解SVG的工作原理和使用方法。 1. **基础形状**...
svg.rar_svg_svg c++_svg 例子
09-19
而"svg的小例子"可能是一个实际的SVG图形文件，展示了如何用C++生成或处理SVG图形。如果你想要学习或者深入理解SVG与C++的结合使用，可以通过分析这些示例代码和图形来获取灵感和知识。 SVG与C++的结合使用有多种...
vue3 + vite的svg例子
11-21
综上所述，这个 "vue3 + vite 的 svg 例子" 展示了如何在 Vue3 和 Vite 的环境中有效地管理和使用 SVG 资源，利用现代前端工具链的优势，提高开发效率和用户体验。开发者可以参考此项目来学习如何在自己的项目中集成...
史上最全的SVG例子
04-26
SVG，全称Scalable Vector Graphics，是一种基于XML的矢量图像格式，广泛应用于网页设计、图形编程和移动应用中。它的最大特点是无论放大多少倍，图像都能保持清晰，不会出现像素化的现象，与传统的位图（如JPEG、...
svg-例子
02-13
本示例“svg-例子”可能包含了一些使用SVG和CSS技术创建的图形和动画。 在SVG中，图形由基本形状如矩形、圆形、线条、多边形等构建。例如，我们可以用`<rect>`创建一个矩形，用`<circle>`创建一个圆形，或者用`...
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 415
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
lph159的博客
07-24 855
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 1004
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 907
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 988
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 511
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 320
thinkphp8图片上传的验证
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
最新发布
KenkoTech的博客
07-24 351
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
swing开发svg例子
05-24
以下是一个简单的Swing应用程序，它使用SVG图像作为GUI元素： ```java import java.awt.BorderLayout; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值