将上面内容放到一起做一个简单的网页
时间: 2024-09-27 09:02:46 浏览: 18
为了创建一个简单的网页,包含SVG图形、滤镜和渐变,你可以按照以下步骤操作:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>SVG图形示例</title>
<style>
.svg-container {
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<div class="svg-container">
<!-- 圆形 -->
<circle id="circle1" cx="50" cy="50" r="40" fill="red"></circle>
<!-- 矩形 -->
<rect id="rectangle1" x="60" y="60" width="80" height="80" fill="blue"></rect>
<!-- 自定义多边形 -->
<polygon id="polygon1" points="90,60 140,100 190,60" fill="green"></polygon>
</div>
<!-- 滤镜部分 -->
<filter id="grayscale-filter">
<feColorMatrix type="matrix"
values="0.33 0.33 0.33 0 1"/>
</filter>
<!-- 渐变部分 -->
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<!-- 应用滤镜和渐变 -->
<script>
// JavaScript 部分(这里只演示了如何给元素添加事件监听)
document.getElementById('circle1').addEventListener('click', function() {
this.style.filter = 'url(#grayscale-filter)';
});
document.getElementById('rectangle1').addEventListener('mouseover', function() {
this.style.fill = "url(#gradient1)";
});
</script>
</body>
</html>
```
在这个例子中,我们创建了一个包含SVG图形的容器,并在JavaScript中添加了交互效果,当用户点击圆形时应用滤镜,矩形在鼠标悬停时切换渐变。
阅读全文