Javascript 如何为两种不同的SVG多边形形状设置边距

我用图像设计了两种不同的多边形形状，但问题是我无法设置它们的位置，如左边空白或顶部空白，在mozilla中，两种形状都将出现，但在chrome和opera中，只有一种形状出现。还有，我也不会做鼠标盖

下面是我的2SVG代码

<style>
#box1{
height: 0px;
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0px; 
}
#box2{
height: 0px;
width: 0px;
}
#img {clip-path: url(#clipping);
  -webkit-clip-path: url(#clipping);
  -webkit-shape-outside: url(#clipping);
   shape-outside: url(#clipping);
}
#img2 {clip-path: url(#clipping);
  -webkit-clip-path: url(#clipping);
  -webkit-shape-outside: url(#clipping);
   shape-outside: url(#clipping);
}
</style>
<div id="box1">
<svg width="0" height="0" >
  <defs>
   <clipPath id="clipping">
<!--      <circle cx="284" cy="213" r="213" />-->
    <path d="M188 0 L1 0 L1 188 L188 0 Z">
   </clipPath>
  </defs>
</svg>
<div id="img">
<img src="img/1.jpg" width="568">
</div>
</div>

<div id="box2">
<svg width="0" height="0" >
  <defs>
    <clipPath id="clipping2">
<!--      <circle cx="284" cy="213" r="213" />-->
        <path d="M181 0 L181 149 L1 149 L181 0 Z">
    </clipPath>
  </defs>
</svg>
<div id="img2">
<img src="img/2.jpg">
</div>
</div>

---

你的意思是将clipping2与img2一起使用吗？@RobertLongson是的，实际上我已经将img2与clipping2一起使用了，在上面的SVG多边形形状代码中，我可以在Mozilla中设置边距，但不能在Chrome或Opera中设置边距，比如边距顶部，边距左侧。怎么做？不，现在不行，我的代码中没有提到。我使用inspect元素在浏览器中执行此操作@RobertLongson@RobertLongson请看，我已经在样式标签中为Box1和Box2添加了CSS，现在我想给Box2留一些空白，在上面的代码中，Box1上的内容不在框内，如何修复Box1和Box2中的内容