首页 \ 问答 \ 定位由svg屏蔽的多个图像(positioning multiple images that are masked by an svg)

定位由svg屏蔽的多个图像(positioning multiple images that are masked by an svg)

 我创建了一个动画，其中2个图像被两个不同的内联svg多边形掩盖。 出现Img1，然后它的多边形<clipPath>动画。 然后出现Img2，然后是其多边形<clipPath>动画。 所有这一切都正常工作，除了图像应该叠加在一起，以便img2最终掩盖img1。 相反，Img2出现在img1下面。  
 每个图像都在<svg>设置，所以我尝试在自己的<div>设置每个<svg>并将位置设置为绝对。 我还考虑修改<svg> viewbox。 这些都没有奏效。 显然我错过了什么或做错了什么。 有人可以帮忙吗？  
 这是一个解决问题的工作jsfiddle。  
 这是html：  
<body>
    <div id="container">
    <div id="border"></div>
      <!--------masked images-------->
      <div id="img1Masked">
        <svg width="300" height="250" viewbox="0 0 300 250">
          <image xlink:href="https://static.dvidshub.net/media/thumbs/photos/1210/692947/463x486_q75.jpg" x="0" y="0" width="463" height="486" />
        </svg>
      </div>

      <div id="img2Masked">
        <svg width="300" height="250" viewbox="0 0 300 250">
          <image xlink:href="http://edinspace.weebly.com/uploads/5/8/4/4/5844875/3183867_orig.jpg" x="0" y="0" width="933" height="622" />
       </svg>
      </div>
      <!--------polygon clipPaths-------->
      <svg class="svg-defs">
        <defs>
          <clipPath id="clippingImg1">
            <polygon id="img1Shape" points="90 250,302 250,299 -3,138 -3"/>
          </clipPath>
        </defs>
        <defs>
          <clipPath id="clippingImg2">
            <polygon id="img2Shape" points="105 251,301 253,301 -3,66 -3"/>
          </clipPath>
        </defs>
      </svg>
    </div>

    <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script>

</body>
 
 而CSS：  
#container {
    position:relative;
    width:300px;
    height:250px;
    background-color:#fff;
    overflow:visible;
}
#img1Masked image{
    position:absolute;
    clip-path: url(#clippingImg1);
    opacity:0;
    top:0;
    left:0;
}
#img2Masked image{
    position:absolute;
    clip-path: url(#clippingImg2);
    opacity:0;
    top:0;
    left:0;
}
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
}
#border{ 
    position:absolute; 
    width:298px; 
    height:248px; 
    border:solid 1px #000; 
}

I've created an animation where 2 images are being masked by two different inline svg polygons. Img1 appears, then its polygon <clipPath> animates. Img2 then appears, followed by its polygon <clipPath> animating. All of this is working as it should, except that the images should be stacked on top of each other so that img2 ultimately covers up img1. Img2 instead appears below img1.  
Each image is set within an <svg>, so I've tried setting each <svg> within its own <div> and setting the position to absolute. I've also looked into modifying the <svg> viewbox. Neither of these things has worked. Clearly I'm missing something or doing something wrong. Can someone help?  
Here is a working jsfiddle that illustrates the problem.  
This is the html: 
<body>
    <div id="container">
    <div id="border"></div>
      <!--------masked images-------->
      <div id="img1Masked">
        <svg width="300" height="250" viewbox="0 0 300 250">
          <image xlink:href="https://static.dvidshub.net/media/thumbs/photos/1210/692947/463x486_q75.jpg" x="0" y="0" width="463" height="486" />
        </svg>
      </div>

      <div id="img2Masked">
        <svg width="300" height="250" viewbox="0 0 300 250">
          <image xlink:href="http://edinspace.weebly.com/uploads/5/8/4/4/5844875/3183867_orig.jpg" x="0" y="0" width="933" height="622" />
       </svg>
      </div>
      <!--------polygon clipPaths-------->
      <svg class="svg-defs">
        <defs>
          <clipPath id="clippingImg1">
            <polygon id="img1Shape" points="90 250,302 250,299 -3,138 -3"/>
          </clipPath>
        </defs>
        <defs>
          <clipPath id="clippingImg2">
            <polygon id="img2Shape" points="105 251,301 253,301 -3,66 -3"/>
          </clipPath>
        </defs>
      </svg>
    </div>

    <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script>

</body>
 
And the CSS: 
#container {
    position:relative;
    width:300px;
    height:250px;
    background-color:#fff;
    overflow:visible;
}
#img1Masked image{
    position:absolute;
    clip-path: url(#clippingImg1);
    opacity:0;
    top:0;
    left:0;
}
#img2Masked image{
    position:absolute;
    clip-path: url(#clippingImg2);
    opacity:0;
    top:0;
    left:0;
}
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
}
#border{ 
    position:absolute; 
    width:298px; 
    height:248px; 
    border:solid 1px #000; 
}

原文：https://stackoverflow.com/questions/34272629

更新时间：2023-02-19 06:02

最满意答案

 看起来这是你的主要问题  
$berechnung = (60 - $warbeit);
 
 如果你真的想去  
//how many hours over 40 hours you have - overtime hours
 
 那应该是  
$berechnung = ($warbeit - 40);
 
 你拥有它的方式目前适用于50，但只是巧合，因为60-50 = 50-40。 

It looks like this is your main problem 
$berechnung = (60 - $warbeit);
 
If you're really going for 
//how many hours over 40 hours you have - overtime hours
 
Then it should be 
$berechnung = ($warbeit - 40);
 
The way you have it currently works for 50, but only coincidentally, because 60-50 = 50-40.

定位由svg屏蔽的多个图像(positioning multiple images that are masked by an svg)

最满意答案

相关问答

python中的MAPE计算(MAPE calculation in python)[2023-12-27]

格式为php的时间计算问题(time calculation issue with format php)[2022-08-07]

自动计算(Automatic calculation)[2023-09-29]

用PEG.js解析计算(parsing calculation with PEG.js)[2022-03-06]

PHP中的排名计算(Rank Calculation in PHP)[2022-04-05]

复杂计算(Complex Calculation)[2022-06-05]

从字符串解析计算树(Parsing calculation tree from string)[2022-08-28]

PHP后期计算(PHP post calculation)[2023-12-17]

PHP解析干扰了我的计算？(PHP Is Parsing interfering with my calculation? Worktime calculation)[2023-10-08]

PHP分页计算(PHP pagination calculation)[2022-08-17]

相关文章

最新问答