用svg画一个房子,并用css美化
时间: 2023-08-31 22:24:02 浏览: 97
### 回答1:
以下是一个简单的 SVG 房子示例,同时使用 CSS 美化。
```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="100" width="180" height="80" fill="#c7b299"/>
<rect x="25" y="115" width="30" height="30" fill="#b7b7b7"/>
<rect x="95" y="115" width="30" height="30" fill="#b7b7b7"/>
<rect x="165" y="115" width="30" height="30" fill="#b7b7b7"/>
<rect x="50" y="135" width="30" height="45" fill="#4d4d4d"/>
<rect x="120" y="135" width="30" height="45" fill="#4d4d4d"/>
<circle cx="100" cy="70" r="40" fill="#c7b299"/>
<polygon points="85,100 100,75 115,100" fill="#b7b7b7"/>
</svg>
```
这个 SVG 代码画了一个矩形房子,屋顶是一个三角形,有三个矩形窗户,两个矩形门,以及一个圆形突出的太阳。以下是应用到 SVG 元素的 CSS 样式:
```css
svg {
width: 400px;
height: 400px;
}
rect, polygon, circle {
transition: fill 0.3s ease;
}
rect:hover, polygon:hover, circle:hover {
fill: #ffbd69;
}
circle {
transition: transform 0.3s ease;
}
circle:hover {
transform: scale(1.1);
}
```
在上面的样式中,将 SVG 元素的宽度和高度设置为 400 像素,以便更好地展示 SVG 图像。使用 `transition` 属性为矩形、多边形和圆形元素设置过渡效果,并将鼠标悬停时的 `fill` 属性设置为一种橙色。最后,将圆形元素的 `transform` 属性设置为 `scale` 来创建放大效果,并将其设置为在悬停时应用。
### 回答2:
使用SVG(可缩放矢量图形)和CSS,可以轻松地绘制和美化一个房子。
首先,我们可以使用SVG的<path>元素来绘制房子的形状。例如,可以使用直线、矩形和多边形来绘制屋顶、墙壁和窗户等元素。
```
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<path d="M50 10 L150 10 L175 50 L25 50 Z" fill="#ff0000" /> <!-- 绘制屋顶 -->
<rect x="25" y="50" width="150" height="100" fill="#ffcc00" /> <!-- 绘制墙壁 -->
<rect x="40" y="65" width="40" height="40" fill="#ffffff" /> <!-- 绘制窗户 -->
<rect x="120" y="65" width="40" height="40" fill="#ffffff" /> <!-- 绘制窗户 -->
<rect x="25" y="150" width="150" height="40" fill="#654321" /> <!-- 绘制门 -->
</svg>
```
接下来,我们可以使用CSS来美化房子。可以使用CSS选择器来选择要样式化的SVG元素,并应用不同的样式。例如,可以为屋顶、墙壁、窗户和门设置不同的颜色和背景图片。
```css
path {
fill: #ff0000; /* 屋顶的颜色 */
}
rect:nth-of-type(1) {
fill: #ffcc00; /* 第一个墙壁的颜色 */
}
rect:nth-of-type(2),
rect:nth-of-type(3) {
fill: #ffffff; /* 窗户的颜色 */
}
rect:nth-of-type(4) {
fill: #654321; /* 门的颜色 */
}
```
通过结合SVG和CSS,我们可以创建一个美观的房子图形,并根据需求对其进行样式化和定制。以上只是一个简单的例子,可以通过增加更多SVG元素和CSS样式来丰富房子的细节和外观。
### 回答3:
SVG(Scalable Vector Graphics)是用于描述二维矢量图形的一种 XML 格式的文件。使用 SVG 可以在网页中绘制准确,高质量的图形,而且图形保持矢量特性,即可以无损放大。
要用SVG画一个房子,可以按照以下步骤进行:
1. 在HTML文件中添加一个SVG元素,设置画布的宽度和高度:
```html
<svg width="300" height="300">
</svg>
```
2. 在SVG元素中添加路径元素来绘制房子的形状,例如:
```html
<svg width="300" height="300">
<path d="M100 200 L150 150 L200 200 Z" stroke="black" fill="none" />
</svg>
```
上述代码中,通过路径命令("M100 200 L150 150 L200 200 Z")来定义房子的形状。其中"M"表示移动到起始点,"L"表示画直线,"Z"表示闭合路径。stroke属性用于设置描边颜色,fill属性用于设置填充颜色。
3. 可以继续在SVG元素中添加其他元素,如矩形元素、圆形元素等来绘制其他部分的房子,例如:
```html
<svg width="300" height="300">
<path d="M100 200 L150 150 L200 200 Z" stroke="black" fill="none" />
<rect x="120" y="160" width="60" height="40" stroke="black" fill="none" />
<circle cx="150" cy="180" r="5" stroke="black" fill="none" />
</svg>
```
上述代码中,通过rect元素绘制矩形来代表窗户,circle元素绘制圆形来代表大门。
4. 使用CSS对SVG进行美化,可以通过在SVG元素上设置CSS样式来修改其外观,例如:
```html
<svg width="300" height="300" style="background-color: lightblue;">
<path d="M100 200 L150 150 L200 200 Z" stroke="black" fill="none" />
<rect x="120" y="160" width="60" height="40" stroke="black" fill="none" style="stroke-width: 2px;"/>
<circle cx="150" cy="180" r="5" stroke="black" fill="none" />
</svg>
```
上述代码中,通过在SVG元素上添加style属性来设置背景颜色为浅蓝色,通过在矩形元素上设置style属性来增加描边的粗细。
通过以上步骤,就可以使用SVG画一个简单的房子,并通过CSS进行美化。当然,还可以根据需求继续添加其他元素和样式来丰富房子的细节和外观。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)