如何正确调整 svg clipPath 的大小
How to get svg clipPath sized correctly
我在缩放仅用于 clip-path
的内联 SVG 时遇到问题。被剪裁的元素的 宽度为 150px
,高度为 150px
。这是我尝试解决此问题的第 2 天,但我感觉 运行 陷入了困境。
在 Chrome(最新)中,SVG 的正确宽度为 150px
。
在 Opera(最新)中,SVG 的 正确宽度为 150px
在 Firefox (54.0.1) 中,SVG 没有正确的宽度。
body {
background: #333;
}
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
clip-path: url(#clipPath);
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
#clipPath {
transform: scale(2.63, 2.63);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
<defs>
<clipPath id="clipPath" clipPathUnits="objectBoundingBox">
<!-- <path d="M28.487,10.847C21.13-6.364,0.18-2.348,0.08,17.628C0,33.538,27.699,46.784,28.531,49.636C29.285,46.675,57,33.785,56.92,17.509C56.823-2.517,35.506-5.678,28.487,10.847z">-->
<path d="M0.189913333333,0.0723133333333C0.140866666667-0.0424266666667,0.0012-0.0156533333333,0.000533333333333,0.11752C0,0.223586666667,0.18466,0.311893333333,0.190206666667,0.330906666667C0.195233333333,0.311166666667,0.38,0.225233333333,0.379466666667,0.116726666667C0.37882-0.01678,0.236706666667-0.0378533333333,0.189913333333,0.0723133333333z">
</clipPath>
</defs>
</svg>
<div class="image" style="background-image: url('https://images.unsplash.com/photo-1468793195345-d9d67818016d?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');"></div>
应用 transform
使用属性,而不是通过 CSS 在 Firefox 中修复此问题。
body {
background: #333;
}
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
clip-path: url(#clipPath);
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
<defs>
<clipPath id="clipPath" clipPathUnits="objectBoundingBox" transform="scale(2.63, 2.63)">
<path d="M0.189913333333,0.0723133333333C0.140866666667-0.0424266666667,0.0012-0.0156533333333,0.000533333333333,0.11752C0,0.223586666667,0.18466,0.311893333333,0.190206666667,0.330906666667C0.195233333333,0.311166666667,0.38,0.225233333333,0.379466666667,0.116726666667C0.37882-0.01678,0.236706666667-0.0378533333333,0.189913333333,0.0723133333333z">
</path>
</clipPath>
</defs>
</svg>
<div class="image" style="background-image: url('https://images.unsplash.com/photo-1468793195345-d9d67818016d?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');"></div>
我在缩放仅用于 clip-path
的内联 SVG 时遇到问题。被剪裁的元素的 宽度为 150px
,高度为 150px
。这是我尝试解决此问题的第 2 天,但我感觉 运行 陷入了困境。
在 Chrome(最新)中,SVG 的正确宽度为 150px
。
在 Opera(最新)中,SVG 的 正确宽度为 150px
在 Firefox (54.0.1) 中,SVG 没有正确的宽度。
body {
background: #333;
}
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
clip-path: url(#clipPath);
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
#clipPath {
transform: scale(2.63, 2.63);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
<defs>
<clipPath id="clipPath" clipPathUnits="objectBoundingBox">
<!-- <path d="M28.487,10.847C21.13-6.364,0.18-2.348,0.08,17.628C0,33.538,27.699,46.784,28.531,49.636C29.285,46.675,57,33.785,56.92,17.509C56.823-2.517,35.506-5.678,28.487,10.847z">-->
<path d="M0.189913333333,0.0723133333333C0.140866666667-0.0424266666667,0.0012-0.0156533333333,0.000533333333333,0.11752C0,0.223586666667,0.18466,0.311893333333,0.190206666667,0.330906666667C0.195233333333,0.311166666667,0.38,0.225233333333,0.379466666667,0.116726666667C0.37882-0.01678,0.236706666667-0.0378533333333,0.189913333333,0.0723133333333z">
</clipPath>
</defs>
</svg>
<div class="image" style="background-image: url('https://images.unsplash.com/photo-1468793195345-d9d67818016d?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');"></div>
应用 transform
使用属性,而不是通过 CSS 在 Firefox 中修复此问题。
body {
background: #333;
}
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
clip-path: url(#clipPath);
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
<defs>
<clipPath id="clipPath" clipPathUnits="objectBoundingBox" transform="scale(2.63, 2.63)">
<path d="M0.189913333333,0.0723133333333C0.140866666667-0.0424266666667,0.0012-0.0156533333333,0.000533333333333,0.11752C0,0.223586666667,0.18466,0.311893333333,0.190206666667,0.330906666667C0.195233333333,0.311166666667,0.38,0.225233333333,0.379466666667,0.116726666667C0.37882-0.01678,0.236706666667-0.0378533333333,0.189913333333,0.0723133333333z">
</path>
</clipPath>
</defs>
</svg>
<div class="image" style="background-image: url('https://images.unsplash.com/photo-1468793195345-d9d67818016d?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');"></div>