如何在0和1范围内缩放SVG坐标？
如何在0和1范围内缩放SVG坐标？
提问于 2019-02-02 23:32:27
我在缩放内联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之间，但我找不到任何软件选项(亲和力设计器)或在线工具来做这样的事情。
有没有人解决了这个伸缩问题？
ps:这是路径的形状
Stack Overflow用户
回答已采纳
发布于 2019-02-03 00:42:45
您不需要对路径的坐标做任何操作。相反，只要改变<clipPath>的规模即可。
您想要用作clipPath的路径是1280x670，因此只需应用等效的比例(1/ 1280，1/670)。这提供了：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54494533
复制相关文章
相似问题
腾讯云开发者
