如何扩大SVG范围为0和1的坐标?

问题描述 投票:1回答:1

我一直有缩放联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:这里的路径的形状enter image description here

html css svg coordinates scaling
1个回答
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>

Codepen

© www.soinside.com 2019 - 2024. All rights reserved.