如何在CSS中缩放剪辑路径区域？

时间：2018-05-21 13:09:58

标签： css svg

我总是得到相同的剪裁区域大小，这比容器大小（300px这里小）我试图剪辑。

我尝试使用viewBox和width标签的height和<svg> / <clipPath>属性，但没有得到任何结果。  这可以缩放这个区域吗？

#clipped {
  width: 300px;
  height: 300px;
  background-color: #f00;
  -webkit-clip-path: url(#test);
          clip-path: url(#test);
}
<div id="clipped"></div>

<svg width="0" height="0">
    <defs>
        <clipPath id="test">
            <path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
        </clipPath>
    </defs>
</svg>

1 个答案:

答案 0 :(得分：1)

您可以将scale应用于路径：

＆＃13;
＆＃13; 
#clipped {
  width: 300px;
  height: 300px;
  background-color: #f00;
  -webkit-clip-path: url(#test);
          clip-path: url(#test);
}
＆＃13; 
<div id="clipped"></div>

<svg width="0" height="0">
        <defs>
            <clipPath id="test">
                <path transform=scale(1.5) d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
            </clipPath>
        </defs>
    </svg>
＆＃13;
＆＃13;
＆＃13;

如果您想自动缩放以适合大小，您可以将元素视为SVG，您可以正确定义viewBox，然后根据需要调整SVG的宽度/高度。

＆＃13;
＆＃13; 
svg {
  border:1px solid;
}
＆＃13; 
<svg  viewBox="0 0 174 134" width=20>
        <defs>
            <clipPath id="test">
                <path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
            </clipPath>
        </defs>
        
        <rect x="0" y="0" fill="red" width="174" height="134" clip-path="url(#test)" />
    </svg>
    
    <svg  viewBox="0 0 174 134" width=100>
        <defs>
            <clipPath id="test">
                <path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
            </clipPath>
        </defs>
        
        <rect x="0" y="0" fill="red" width="174" height="134" clip-path="url(#test)" />
    </svg>
    <svg  viewBox="0 0 174 134" width=200>
        <defs>
            <clipPath id="test">
                <path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
            </clipPath>
        </defs>
        
        <rect x="0" y="0" fill="red" width="174" height="134" clip-path="url(#test)" />
    </svg>
＆＃13;
＆＃13;
＆＃13;

如果您仍想使用常见的HTML元素，可以使用SVG作为背景：

＆＃13;
＆＃13; 
.box {
  border:1px solid;
  display:inline-block;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 134" ><defs><clipPath id="test"><path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/></clipPath></defs><rect x="0" y="0" fill="red" width="174" height="134" clip-path="url(#test)" /></svg>')0 0/100% 100% no-repeat;
  
 }
＆＃13; 
<div class="box" style="width:100px;height:100px;">

</div>

<div class="box" style="width:220px;height:200px;">

</div>
<div class="box" style="width:200px;height:150px;">

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题