我一直有缩放联SVG问题,以夹路径它的CSS,在例子,我试图来显示图像的容器。
我已经看到了解决其他类似的问题,但他们仍然没有像预期的那样:
<style>
.cutR{
clip-path: url(#cutR)
}
.blogMainArticleMedia{
float:left;
width:100%
}
.image{
float:left;
display:block;
width:100%
}
</style>
<div class="blogMainArticleMedia cutR">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" alt="image" class="image">
</div>
<svg width="0" height="0" preserveAspectRatio="none">
<defs>
<clipPath id="cutR" clipPathUnits="objectBoundingBox">
<path d="M0,0c1.45,81.4 320,80 320,80l320,0l320,0c0,0 320,0.62 320,80c0,105.84 0,400 0,400c-1.45,81.4 -320,80 -320,80l-640,0c-171.919,0.239 -319.7,-0.491 -320,80l0,-720Z"
style="fill:none;" />
</clipPath>
</defs>
</svg>
https://codepen.io/thepra/pen/wNdpXW
他们建议的轨迹的坐标扩展到0和1之间的范围内,但我无法找到任何软件选项(亲和设计师)或在线工具做这样的事情。
有没有人解决了这个规模问题?
你不需要做任何事情来的轨迹的坐标。相反,只是变换了<clipPath>
的规模。
要用作clipPath使用的路径是1280 * 670,所以只适用于同等规模(1/1280,六百七十〇分之一)。这给:
transform="scale(0.00078125, 0.001492537313433)"
这与沿clipPathUnits="objectBoundingBox"
意味着你可以使用该形状在任何尺寸或纵横比夹子夹。
.cutR {
clip-path: url(#cutR)
}
.blogMainArticleMedia {
float: left;
width: 100%
}
.image {
float: left;
display: block;
width: 100%
}
<div class="blogMainArticleMedia cutR">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" alt="image" class="image">
</div>
<!-- Viewbox has no effect -->
<svg viewBox="0 0 1280 670">
<defs>
<clipPath transform="scale(0.00078125, 0.001492537313433)" id="cutR" clipPathUnits="objectBoundingBox">
<path d="M0 0C1.45 75.8834 320 74.5783 320 74.5783H960C960 74.5783 1280 75.1563 1280 149.157V522.048C1278.55 597.932 960 596.627 960 596.627H320C148.081 596.849 0.3 596.169 0 671.205V0Z"/>
</clipPath>
</defs>
</svg>