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

Question

我设计了两个不同的多边形形状和图像，但问题是我无法设置它们的位置，如margin-left或margin-top，在mozilla中两个形状都来了但是在chrome和opera中只有单个形状即将到来。以及我也无法进行鼠标悬停

下面是我的2 SVG代码

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