svg图形
来源：互联网 发布：windows主辅域搭建 编辑：程序博客网 时间：2024/05/16 19:50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script type="text/javascript">
function draw() {
var a = 45, b = 22, x0 = 10;
var u = [];
for (var i =-30; i < 30;i++ ) {
var y = (1 - i*i/(a*a)) * b*b;
y = Math.sqrt(y);
//移动
var x=i+200;
y=70+y;
u.push(x + ',' + y.toFixed(0))
}
var a = 50, b = 25, x0 = 10;
for (var i =40; i > -40;i-- ) {
var y = (1 - i*i/(a*a)) * b*b;
y = Math.sqrt(y);
//移动
var x=i+200;
y=100+y;
u.push(x + ',' + y.toFixed(0))
}
point = u.join(" ")
document.getElementById("polygon").setAttribute("points", point)
document.getElementById("polygon2").setAttribute("points", point)
}
window.onload = draw
</script>
<div id="div"></div>
<svg id="ad" width="750" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#000000;stop-opacity:0.1"/>
<stop offset="15%" style="stop-color:#ffffff;stop-opacity:0.2"/>
<stop offset="85%" style="stop-color:#ffffff;stop-opacity:0.2"/>
<stop offset="100%" style="stop-color:#000000;stop-opacity:0.1"/>
</linearGradient>
<linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff0000;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#ee0000;stop-opacity:1"/>
</linearGradient>
<ellipse cx="200" cy="82" rx="27" ry="6" style="fill:#ff0000;stroke:#ee0000; stroke-width:2;filter:url(#Gaussian_Blur)"/>
<polygon id="polygon" points="" style="fill:#ff0000;stroke:#ee0000; stroke-width:2;filter:url(#Gaussian_Blur)"/>
<polygon id="polygon2" points="" style="fill:url(#orange_red)"/>
</svg>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script type="text/javascript">
function draw() {
var a = 45, b = 22, x0 = 10;
var u = [];
for (var i =-30; i < 30;i++ ) {
var y = (1 - i*i/(a*a)) * b*b;
y = Math.sqrt(y);
//移动
var x=i+200;
y=70+y;
u.push(x + ',' + y.toFixed(0))
}
var a = 50, b = 25, x0 = 10;
for (var i =40; i > -40;i-- ) {
var y = (1 - i*i/(a*a)) * b*b;
y = Math.sqrt(y);
//移动
var x=i+200;
y=100+y;
u.push(x + ',' + y.toFixed(0))
}
point = u.join(" ")
document.getElementById("polygon").setAttribute("points", point)
document.getElementById("polygon2").setAttribute("points", point)
}
window.onload = draw
</script>
<div id="div"></div>
<svg id="ad" width="750" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#000000;stop-opacity:0.1"/>
<stop offset="15%" style="stop-color:#ffffff;stop-opacity:0.2"/>
<stop offset="85%" style="stop-color:#ffffff;stop-opacity:0.2"/>
<stop offset="100%" style="stop-color:#000000;stop-opacity:0.1"/>
</linearGradient>
<linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ff0000;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#ee0000;stop-opacity:1"/>
</linearGradient>
<ellipse cx="200" cy="82" rx="27" ry="6" style="fill:#ff0000;stroke:#ee0000; stroke-width:2;filter:url(#Gaussian_Blur)"/>
<polygon id="polygon" points="" style="fill:#ff0000;stroke:#ee0000; stroke-width:2;filter:url(#Gaussian_Blur)"/>
<polygon id="polygon2" points="" style="fill:url(#orange_red)"/>
</svg>
</body>
</html>
- svg图形
- SVG动态创建图形
- SVG相关-基本图形
- svg 图形绘制
- 矢量图形SVG
- SVG图形web应用
- SVG图形初探
- 写一个SVG图形
- JS实现SVG图形
- svg绘制简单图形
- SVG 基本图形
- SVG表现3D图形
- 可缩放矢量图形 SVG
- SVG 图形嵌入html页面
- javascript 动态改变svg图形
- SVG(可缩放矢量图形)
- SVG图形绘制与滤镜
- 矢量图形SVG&高级动画
- 单片机C语言模板
- 根据用户需求分析同行提升网站关键词排名
- window API一天一练之邮槽
- 转帖：粘包、丢包及TCP信息收发
- wamp5如何配置多个自定义域名访问本地不同的项目
- svg图形
- Find M Integers from an Array of Size N equally
- Fedora 18/19没有注销
- 【数据挖掘概念与技术】学习笔记6-挖掘频繁模式、关联和相关性：基本概念和方法（编缉中）
- [未解决]数据库异常：多步 OLE DB 操作产生错误。如果可能，请检查每个 OLE DB 状态值。
- Android 4.4 Kitkat 编译时对于存储器挂载方式的修改，以泛泰820，860为例
- java 简单的单例模式 例子
- javascript基础
- JAVA 工厂模式简单例子
