Question

您好，

我有这个我在SVG中制作的形状：

<svg xmlns="http://www.w3.org/2000/svg" height="280" width="130">
 <defs>
  <clipPath id="buscar" clipPathUnits="objectBoundingBox">
   <polygon points="0.08,0 0.08,0.07 0.14,0.12 0.14,0.96 0.92,0.964 0.97,0.923 0.97,0.15 0.99,0.13 0.99,0"/>
  </clipPath>
 </defs> 
 <polygon points="10.2539,0.918692 10.2539,1.24946 9.92309,19.111 17.8616,31.6803 18.1923,269.669 119.077,270.165 125.858,259.746 125.692,42.9264 128.338,37.3033 128.338,0.918692 10.2539,0.918692" id="p2" style="fill:none; stroke-width: 1px;" stroke="#555555"/>
</svg>

两个形状完全相同，但是clip-path中的coords是在objectBoundingBox单元中，我也希望将它用于下面的多边形，所以我可以为两者提供完全相同的坐标。有可能吗？

我的目标是让一个被边框包围的剪裁div当然具有相同的形状。

谢谢。

Answer 1

正如罗伯特试图告诉你的那样，你的问题无法回答，因为它毫无意义。

objectBoundingBox单位仅用于应用于其他元素的内容。示例可以是：渐变，蒙版等。例如，您可以将渐变定义为相对于其应用的元素，以便它适合＆＃34;无论其他元素的大小如何。

您无法在objectBoundingBox单元中定义独立多边形，因为没有其他元素可以基于单位。

你还不是很清楚自己想要什么，但也许你的意思是给定一个图像和一个多边形，你想要转换多边形，以便它以相对于那个图像的objectBoundingBox单位定义？

如果这就是你的意思，那么答案就是没有简单的方法可以做到。您可以采取的几种方法是：

给定图像宽度W和高度H，手动通过多边形并将所有X坐标除以W和a;将Y坐标除以H.

因此，如果图像是300x400，那么多边形的第一个坐标将变为：

（121.67 / 300），（271.958 / 400）或0.41,0.68
另一种方法是使用SVG编辑器并将图像和多边形缩小到一起，使它们位于文档的左上角，从0到100,100。然后，当您保存新SVG时，所有多边形坐标都将在0-100范围内。然后，您可以通过将所有值除以100来获取objectBoundingBox坐标值。这有点单调乏味，但是如果你有很多坐标需要转换，它可以节省你很多时间。

另一方面，如果要对图像和剪切路径使用相同的多边形，则需要viewBox "0 0 1 1"。例如：

＆＃13;

<svg width="400px" height="400px" viewBox="0 0 1 1">
  <defs>
    <clipPath id="myclip" clipPathUnits="objectBoundingBox">
      <use xlink:href="#poly"/>
    </clipPath>
  </defs>

  <polygon id="poly" points="0.1 0.1 0.9 0.5 0.1 0.9"
           fill="none" stroke="red" stroke-width="0.02"/>

  <image xlink:href="http://placekitten.com/200/200" width="1" height="1"
         clip-path="url(#myclip)"/>
</svg>

＆＃13;

请注意，此方法存在一些限制。如果他们没有彼此具有相同的宽高比，那么你可能会遇到一些问题。

Answer 2

尝试使用SVG feMorphology过滤器来实现您想要的... https://stackoverflow.com/a/37930426/5776618

缩小/放大示例中的形状的方法不起作用，因为示例中的不规则形状会导致角落被切割 - 您最终会出现不均匀的边框。

重申我在上面的链接答案中所说的话......

使用扩张过滤器的关键方面是：

创建高度和宽度的匹配和形状
使用所需的形状路径/多边形
使用滤镜扩大剪裁的矩形以制作边框

＆＃13;

.clipper{
  clip-path: url(#clip_shape);
}
.dilate{
  filter: url("#dilate_shape");
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" height="300" width="300">
 <defs>
  <clipPath id="clip_shape" clipPathUnits="objectBoundingBox">
    <polygon points="0.08,0 0.08,0.07 0.14,0.12 0.14,0.96 0.92,0.964 0.97,0.923 0.97,0.15 0.99,0.13 0.99,0"/>
  </clipPath>
   <filter id="dilate_shape">
      <feMorphology operator="dilate" in="SourceGraphic" radius="3" />
   </filter>
   
 </defs> 
 
 <g transform="translate(5,5)">
   <g class="dilate">
     <rect class="clipper" x=0 y=0 height="200px" width="200px" fill="lightgreen"></rect>
   </g>
   <image class="clipper" xlink:href="http://placekitten.com/200/200" height="200px" width="200px">
 </g>
</svg>

＆＃13;

我可以在objectBoundingBox单元中绘制SVG形状吗？

2 个答案: