svg 图标与背景重叠
The svg icon is overlapped with backround
我有一个工作倾斜的 div 块，其下方有图标和文本。首先使用了 jpeg 图标。但它们应该与 svg 交换。此外，图标和文本应始终居中。这是旧版本无法实现的。
我用 SVG 交换了图标，更改了标记和 css，但图标没有显示。看起来，它们被背景重叠了。此外，还暴露了一些小问题：文本无法格式化和居中。 svg 不会更改 hover.
上的颜色
这是 JSFiddle svg 更新
这就是我要实现的目标：
为了实现适应性，网站的所有元素header：部分、图标、文本的形式都放在 SVG 中
截面的形式是在矢量编辑器中绘制的。
<div class="header">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet" >
<path id="p1" fill="#65C6CC" d="M 5,3 H 150 L 120,203 H 5 Z" />
<path id="p2" fill="#E0AD51" d="M 150,3 H 285 L 255,203 H 120 Z" />
<path id="p3" fill="#329FA4" d="M 285,3 H 425 L 390,203 H 255 Z" />
<path id="p4" fill="#E0AD51" d="M 425,3 H 560 L 525,203 H 390 L 425,3"/>
<path id="p5" fill="#65C6CC" d="M 560,3 H 670 V 203 H 525 Z" />
</svg>
</div>
- 向图标添加代码
- 已添加文本并使用命令将其与部分的中心对齐
text-anchor="middle"
- 使用规则
CSS 实现突出显示图标和文本
.header {
width:100%;
height:100%;
}
svg text {
font-size:14px;
font-weight:bold;
fill:white;
text-anchor:middle;
}
:hover.icon {
fill:greenyellow;
stroke:greenyellow;
}
<div class="header">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet" >
<g class="icon">
<path id="p1" fill="#65C6CC" d="M 5,3 H 150 L 120,203 H 5 Z" />
<!-- icon supervisor -->
<path class="icon" transform="translate(50 50)" fill="white" d="M33 24c2.76 0 4.98-2.24 4.98-5s-2.22-5-4.98-5c-2.76 0-5 2.24-5 5s2.24 5 5 5zm-15-2c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm15 6c-3.67 0-11 1.84-11 5.5V38h22v-4.5c0-3.66-7.33-5.5-11-5.5zm-15-2c-4.67 0-14 2.34-14 7v5h14v-4.5c0-1.7.67-4.67 4.74-6.94C21 26.19 19.31 26 18 26z"/>
<text x="70" y="130" > MEET
<tspan x="65" y="150"> THE CREATERS </tspan>
</text>
</g>
<g class="icon">
<path id="p2" fill="#E0AD51" d="M 150,3 H 285 L 255,203 H 120 Z" />
<!-- icon alarm -->
<path transform="translate(180 50)" fill="white" d="M44 11.44l-9.19-7.71-2.57 3.06 9.19 7.71L44 11.44zM15.76 6.78l-2.57-3.06L4 11.43l2.57 3.06 9.19-7.71zM25 16h-3v12l9.49 5.71L33 31.24l-8-4.74V16zm-1.01-8C14.04 8 6 16.06 6 26s8.04 18 17.99 18S42 35.94 42 26 33.94 8 23.99 8zM24 40c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.26 14-14 14z"/>
<text x="200" y="130" > CARS THAT
<tspan x="195" y="150"> FOUND HOMES </tspan>
</text>
</g>
<g class="icon">
<path id="p3" fill="#329FA4" d="M 285,3 H 425 L 390,203 H 255 Z" />
<!-- icon favorite -->
<path transform="translate(310 50)" fill="white" d="M33 6c-3.48 0-6.82 1.62-9 4.17C21.82 7.62 18.48 6 15 6 8.83 6 4 10.83 4 17c0 7.55 6.8 13.72 17.1 23.07L24 42.7l2.9-2.63C37.2 30.72 44 24.55 44 17c0-6.17-4.83-11-11-11zm-8.79 31.11l-.21.19-.21-.19C14.28 28.48 8 22.78 8 17c0-3.99 3.01-7 7-7 3.08 0 6.08 1.99 7.13 4.72h3.73C26.92 11.99 29.92 10 33 10c3.99 0 7 3.01 7 7 0 5.78-6.28 11.48-15.79 20.11z"/>
<text x="330" y="130" > CHECK OUT
<tspan x="325" y="150"> THE `A` LIST </tspan>
</text>
</g>
<g class="icon">
<path id="p4" fill="#E0AD51" d="M 425,3 H 560 L 525,203 H 390 L 425,3"/>
<!-- icon map -->
<path transform=" scale(2) translate(230 25)" fill="white" d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/><path d="M0 0h24v24H0z" fill="none"/>
<text x="470" y="130" > DRIVE INTO
<tspan x="465" y="150"> THE ADVENTURE </tspan>
</text>
</g>
<g class="icon">
<path id="p5" fill="#65C6CC" d="M 560,3 H 670 V 203 H 525 Z" />
<!-- chat -->
<path transform="translate(585 50)" fill="white" d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zm-4 24H12v-4h24v4zm0-6H12v-4h24v4zm0-6H12v-4h24v4z"/>
<text x="605" y="130" > GET IN TOUCH
<tspan x="605" y="150"> WITH US </tspan>
</text>
</g>
</svg>
</div>
我有一个工作倾斜的 div 块，其下方有图标和文本。首先使用了 jpeg 图标。但它们应该与 svg 交换。此外，图标和文本应始终居中。这是旧版本无法实现的。
我用 SVG 交换了图标，更改了标记和 css，但图标没有显示。看起来，它们被背景重叠了。此外，还暴露了一些小问题：文本无法格式化和居中。 svg 不会更改 hover.
这是 JSFiddle svg 更新
这就是我要实现的目标：
为了实现适应性，网站的所有元素header：部分、图标、文本的形式都放在 SVG 中
截面的形式是在矢量编辑器中绘制的。
<div class="header">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet" >
<path id="p1" fill="#65C6CC" d="M 5,3 H 150 L 120,203 H 5 Z" />
<path id="p2" fill="#E0AD51" d="M 150,3 H 285 L 255,203 H 120 Z" />
<path id="p3" fill="#329FA4" d="M 285,3 H 425 L 390,203 H 255 Z" />
<path id="p4" fill="#E0AD51" d="M 425,3 H 560 L 525,203 H 390 L 425,3"/>
<path id="p5" fill="#65C6CC" d="M 560,3 H 670 V 203 H 525 Z" />
</svg>
</div>
- 向图标添加代码
- 已添加文本并使用命令将其与部分的中心对齐
text-anchor="middle" - 使用规则
CSS 实现突出显示图标和文本
.header {
width:100%;
height:100%;
}
svg text {
font-size:14px;
font-weight:bold;
fill:white;
text-anchor:middle;
}
:hover.icon {
fill:greenyellow;
stroke:greenyellow;
}
<div class="header">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet" >
<g class="icon">
<path id="p1" fill="#65C6CC" d="M 5,3 H 150 L 120,203 H 5 Z" />
<!-- icon supervisor -->
<path class="icon" transform="translate(50 50)" fill="white" d="M33 24c2.76 0 4.98-2.24 4.98-5s-2.22-5-4.98-5c-2.76 0-5 2.24-5 5s2.24 5 5 5zm-15-2c3.31 0 5.98-2.69 5.98-6s-2.67-6-5.98-6c-3.31 0-6 2.69-6 6s2.69 6 6 6zm15 6c-3.67 0-11 1.84-11 5.5V38h22v-4.5c0-3.66-7.33-5.5-11-5.5zm-15-2c-4.67 0-14 2.34-14 7v5h14v-4.5c0-1.7.67-4.67 4.74-6.94C21 26.19 19.31 26 18 26z"/>
<text x="70" y="130" > MEET
<tspan x="65" y="150"> THE CREATERS </tspan>
</text>
</g>
<g class="icon">
<path id="p2" fill="#E0AD51" d="M 150,3 H 285 L 255,203 H 120 Z" />
<!-- icon alarm -->
<path transform="translate(180 50)" fill="white" d="M44 11.44l-9.19-7.71-2.57 3.06 9.19 7.71L44 11.44zM15.76 6.78l-2.57-3.06L4 11.43l2.57 3.06 9.19-7.71zM25 16h-3v12l9.49 5.71L33 31.24l-8-4.74V16zm-1.01-8C14.04 8 6 16.06 6 26s8.04 18 17.99 18S42 35.94 42 26 33.94 8 23.99 8zM24 40c-7.73 0-14-6.27-14-14s6.27-14 14-14 14 6.27 14 14-6.26 14-14 14z"/>
<text x="200" y="130" > CARS THAT
<tspan x="195" y="150"> FOUND HOMES </tspan>
</text>
</g>
<g class="icon">
<path id="p3" fill="#329FA4" d="M 285,3 H 425 L 390,203 H 255 Z" />
<!-- icon favorite -->
<path transform="translate(310 50)" fill="white" d="M33 6c-3.48 0-6.82 1.62-9 4.17C21.82 7.62 18.48 6 15 6 8.83 6 4 10.83 4 17c0 7.55 6.8 13.72 17.1 23.07L24 42.7l2.9-2.63C37.2 30.72 44 24.55 44 17c0-6.17-4.83-11-11-11zm-8.79 31.11l-.21.19-.21-.19C14.28 28.48 8 22.78 8 17c0-3.99 3.01-7 7-7 3.08 0 6.08 1.99 7.13 4.72h3.73C26.92 11.99 29.92 10 33 10c3.99 0 7 3.01 7 7 0 5.78-6.28 11.48-15.79 20.11z"/>
<text x="330" y="130" > CHECK OUT
<tspan x="325" y="150"> THE `A` LIST </tspan>
</text>
</g>
<g class="icon">
<path id="p4" fill="#E0AD51" d="M 425,3 H 560 L 525,203 H 390 L 425,3"/>
<!-- icon map -->
<path transform=" scale(2) translate(230 25)" fill="white" d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/><path d="M0 0h24v24H0z" fill="none"/>
<text x="470" y="130" > DRIVE INTO
<tspan x="465" y="150"> THE ADVENTURE </tspan>
</text>
</g>
<g class="icon">
<path id="p5" fill="#65C6CC" d="M 560,3 H 670 V 203 H 525 Z" />
<!-- chat -->
<path transform="translate(585 50)" fill="white" d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zm-4 24H12v-4h24v4zm0-6H12v-4h24v4zm0-6H12v-4h24v4z"/>
<text x="605" y="130" > GET IN TOUCH
<tspan x="605" y="150"> WITH US </tspan>
</text>
</g>
</svg>
</div>