将 clip-path: polygon() 转换为 Edge-compatible SVG
Converting clip-path: polygon() to Edge-compatible SVG
我正在尝试创建可跨浏览器(包括 Edge)工作的 CSS 插图。
使用 this answer,我尝试将以下(有效)CSS 多边形剪辑路径转换为边缘兼容的 SVG 驱动方法。 1 对 1 方法正在渲染 某些东西,但这不是想要的结果。
我误会了什么?
当前工作CSS剪辑路径:多边形()
.you-headshot {
position: relative;
max-width: 500px;
max-height: 500px;
background-color: #a3a3a1;
width: 100%;
height: 100%;
border-radius: 400px;
overflow: hidden;
}
.you-headshot div {
position: absolute;
height: 100%;
width: 100%;
}
.you-head-outline {
background-color: #000;
clip-path: polygon(48% 6%, 43% 7%, 38% 9%, 34% 12%, 29% 16%, 24% 22%, 22% 30%, 22% 44%, 23% 50%, 23% 65%, 25% 72%, 28% 77%, 32% 82%, 35% 86%, 40% 90%, 43% 92%, 50% 93%, 55% 91%, 62% 87%, 70% 76%, 74% 69%, 75% 64%, 75% 54%, 74% 49%, 74% 40%, 74% 32%, 71% 23%, 66% 15%, 59% 9%, 53% 6%);
}
.you-neck-outline {
background-color: #000;
clip-path: polygon(29% 77%, 28% 88%, 23% 100%, 24% 100%, 76% 100%, 68% 90%, 67% 87%, 65% 71%);
}
<div class="you-headshot">
<div class="you-neck-outline">
</div>
<div class="you-head-outline">
</div>
</div>
SVG 转换无效
.you-headshot {
position: relative;
max-width: 500px;
max-height: 500px;
background-color: #a3a3a1;
width: 100%;
height: 100%;
border-radius: 400px;
overflow: hidden;
}
.you-headshot div {
position: absolute;
height: 100%;
width: 100%;
}
.you-head-outline {
background-color: #000;
clip-path: url(#you-head-outline)
}
.you-neck-outline {
background-color: #000;
clip-path: url(#you-neck-outline)
}
<div class="you-headshot">
<div class="you-head-outline">
</div>
<div class="you-neck-outline">
</div>
<svg width="0" height="0">
<clipPath id="you-head-outline" clipPathUnits="objectBoundingBox">
<polygon points=".48, .6, .43, .7, .38, .9, .34, .12, .29, .16, .24, .22, .22, .30, .22, .44, .23, .50, .23, .65, .25, .72, .28, .77, .32, .82, .35, .86, .40, .90, .43, .92, .50, .93, .55, .91, .62, .87, .70, .76, .74, .69, .75, .64, .75, .54, .74, .49, .74, .40, .74, .32, .71, .23, .66, .15, .59, .9, .53, .6"/>
</clipPath>
<clipPath id="you-neck-outline" clipPathUnits="objectBoundingBox">
<polygon points=".29, .77, .28, .88, .23, .100, .24, .100, .76, .100, .68, .90, .67, .87, .65, .71"/>
</clipPath>
</svg>
</div>
您有一些错误:
clipPath 元素与 div 具有相同的 id。我通过将 cp-
添加到剪切路径 id
来更改此设置
当您从 % 转换为单位时,您有 6% = .6 而不是 6% = .06。同样在您的代码中 100% = .1 而不是 100% = 1
body{height:500px;}
.you-headshot {
position: relative;
max-width: 500px;
max-height: 500px;
background-color: #a3a3a1;
width: 100%;
height: 100%;
border-radius: 400px;
overflow: hidden;
}
.you-headshot div {
position: absolute;
height: 100%;
width: 100%;
}
.you-head-outline {
background-color: #000;
clip-path: url(#cp-you-head-outline)
}
.you-neck-outline {
background-color: #000;
clip-path: url(#cp-you-neck-outline)
}
<svg width="0" height="0">
<clipPath id="cp-you-head-outline" clipPathUnits="objectBoundingBox">
<polygon points=".48, .06, .43, .07, .38, .09, .34, .12, .29, .16, .24, .22, .22, .30, .22, .44, .23, .50, .23, .65, .25, .72, .28, .77, .32, .82, .35, .86, .40, .90, .43, .92, .50, .93, .55, .91, .62, .87, .70, .76, .74, .69, .75, .64, .75, .54, .74, .49, .74, .40, .74, .32, .71, .23, .66, .15, .59, .09, .53, .06"/>
</clipPath>
<clipPath id="cp-you-neck-outline" clipPathUnits="objectBoundingBox">
<polygon points=".29, .77, .28, .88, .23, 1, .24, 1, .76, 1, .68, .90, .67, .87, .65, .71"/>
</clipPath>
<polygon points=".29, .77, .28, .88, .23, 1, .24, 1, .76, 1, .68, .90, .67, .87, .65, .71"/>
</svg>
<div class="you-headshot">
<div class="you-neck-outline">
</div>
<div class="you-head-outline">
</div>
</div>
我正在尝试创建可跨浏览器(包括 Edge)工作的 CSS 插图。
使用 this answer,我尝试将以下(有效)CSS 多边形剪辑路径转换为边缘兼容的 SVG 驱动方法。 1 对 1 方法正在渲染 某些东西,但这不是想要的结果。
我误会了什么?
当前工作CSS剪辑路径:多边形()
.you-headshot {
position: relative;
max-width: 500px;
max-height: 500px;
background-color: #a3a3a1;
width: 100%;
height: 100%;
border-radius: 400px;
overflow: hidden;
}
.you-headshot div {
position: absolute;
height: 100%;
width: 100%;
}
.you-head-outline {
background-color: #000;
clip-path: polygon(48% 6%, 43% 7%, 38% 9%, 34% 12%, 29% 16%, 24% 22%, 22% 30%, 22% 44%, 23% 50%, 23% 65%, 25% 72%, 28% 77%, 32% 82%, 35% 86%, 40% 90%, 43% 92%, 50% 93%, 55% 91%, 62% 87%, 70% 76%, 74% 69%, 75% 64%, 75% 54%, 74% 49%, 74% 40%, 74% 32%, 71% 23%, 66% 15%, 59% 9%, 53% 6%);
}
.you-neck-outline {
background-color: #000;
clip-path: polygon(29% 77%, 28% 88%, 23% 100%, 24% 100%, 76% 100%, 68% 90%, 67% 87%, 65% 71%);
}
<div class="you-headshot">
<div class="you-neck-outline">
</div>
<div class="you-head-outline">
</div>
</div>
SVG 转换无效
.you-headshot {
position: relative;
max-width: 500px;
max-height: 500px;
background-color: #a3a3a1;
width: 100%;
height: 100%;
border-radius: 400px;
overflow: hidden;
}
.you-headshot div {
position: absolute;
height: 100%;
width: 100%;
}
.you-head-outline {
background-color: #000;
clip-path: url(#you-head-outline)
}
.you-neck-outline {
background-color: #000;
clip-path: url(#you-neck-outline)
}
<div class="you-headshot">
<div class="you-head-outline">
</div>
<div class="you-neck-outline">
</div>
<svg width="0" height="0">
<clipPath id="you-head-outline" clipPathUnits="objectBoundingBox">
<polygon points=".48, .6, .43, .7, .38, .9, .34, .12, .29, .16, .24, .22, .22, .30, .22, .44, .23, .50, .23, .65, .25, .72, .28, .77, .32, .82, .35, .86, .40, .90, .43, .92, .50, .93, .55, .91, .62, .87, .70, .76, .74, .69, .75, .64, .75, .54, .74, .49, .74, .40, .74, .32, .71, .23, .66, .15, .59, .9, .53, .6"/>
</clipPath>
<clipPath id="you-neck-outline" clipPathUnits="objectBoundingBox">
<polygon points=".29, .77, .28, .88, .23, .100, .24, .100, .76, .100, .68, .90, .67, .87, .65, .71"/>
</clipPath>
</svg>
</div>
您有一些错误:
clipPath 元素与 div 具有相同的 id。我通过将
来更改此设置cp-
添加到剪切路径 id当您从 % 转换为单位时,您有 6% = .6 而不是 6% = .06。同样在您的代码中 100% = .1 而不是 100% = 1
body{height:500px;}
.you-headshot {
position: relative;
max-width: 500px;
max-height: 500px;
background-color: #a3a3a1;
width: 100%;
height: 100%;
border-radius: 400px;
overflow: hidden;
}
.you-headshot div {
position: absolute;
height: 100%;
width: 100%;
}
.you-head-outline {
background-color: #000;
clip-path: url(#cp-you-head-outline)
}
.you-neck-outline {
background-color: #000;
clip-path: url(#cp-you-neck-outline)
}
<svg width="0" height="0">
<clipPath id="cp-you-head-outline" clipPathUnits="objectBoundingBox">
<polygon points=".48, .06, .43, .07, .38, .09, .34, .12, .29, .16, .24, .22, .22, .30, .22, .44, .23, .50, .23, .65, .25, .72, .28, .77, .32, .82, .35, .86, .40, .90, .43, .92, .50, .93, .55, .91, .62, .87, .70, .76, .74, .69, .75, .64, .75, .54, .74, .49, .74, .40, .74, .32, .71, .23, .66, .15, .59, .09, .53, .06"/>
</clipPath>
<clipPath id="cp-you-neck-outline" clipPathUnits="objectBoundingBox">
<polygon points=".29, .77, .28, .88, .23, 1, .24, 1, .76, 1, .68, .90, .67, .87, .65, .71"/>
</clipPath>
<polygon points=".29, .77, .28, .88, .23, 1, .24, 1, .76, 1, .68, .90, .67, .87, .65, .71"/>
</svg>
<div class="you-headshot">
<div class="you-neck-outline">
</div>
<div class="you-head-outline">
</div>
</div>