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

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>

两种形状完全相同，但剪辑路径中的坐标以 objectBoundingBox 为单位，我也想将它用于下面的多边形，这样我就可以对两者拥有完全相同的坐标。有可能吗？

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

谢谢。

Answer 1

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

objectBoundingBox 单位仅用于应用于其他元素的事物。例如：渐变、遮罩等。例如，您可以将渐变定义为相对于它所应用的元素，以便它“适合”其他元素的大小。

您不能在 objectBoundingBox 单位中定义独立的多边形，因为没有其他元素可以作为单位的基础。

---

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

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

1. 给定图像宽度 W 和高度 H，手动遍历多边形并将所有 X 坐标除以 W 和 a；所有 Y 坐标除以 H。

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

   (121.67/300), (271.958/400) 或 0.41,0.68

2. 另一种方法是使用 SVG 编辑器并将图像和多边形一起缩小，使它们位于文档的左上角，从 0,0 到 100,100。然后，当您保存新的 SVG 时，所有多边形坐标都将在 0-100 范围内。然后，您可以将所有值除以 100 以获得您的 objectBoundingBox 坐标值。这有点乏味，但如果你有很多坐标要转换，它可以为你节省很多时间。

---

另一方面，如果您想为图像和剪切路径使用相同的多边形，那么您需要有一个viewBox 或"0 0 1 1"。例如：

<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>

请注意，这种方法存在一些限制。如果两者的纵横比不同，您可能会遇到一些对齐问题。

Answer 2

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

在您的示例中缩小/放大形状的方法将不起作用，因为您示例中的不规则形状会导致切角 - 您最终会得到一个不均匀的边框。

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

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

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

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

<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>