Question

我使用.png面具进行Safari / Chrome和（因为Firefox不支持使用.pngs进行屏蔽）我使用剪辑路径svg来定位Firefox画布。可以查看演示here。

当调整窗口大小时，.png掩码的行为与预期的一样，但svg剪辑路径不会。调整窗口大小后，剪辑路径将保留其原始坐标，而不是使用其DIV缩放，即使画布正在缩放。

任何人都可以帮我解决这个问题，因为我花了很长时间才尝试让这个响应功能无法正常工作吗？

我的项目演示标记是：

＆＃13;

body {
  margin: 0 auto;
  text-align: left;
  width: 100%;
  height: 100%;
  position: inherit;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #f5f5f5;
  overflow: auto;
  list-style-type: none;
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
}
#happycell {
  position: static;
  display: block;
  width: auto;
  max-height: 992px;
  text-align: center;
  margin: 0 auto;
  background-image: url("../images/happycell_flask.png");
  background-repeat: no-repeat;
  background-position: inherit;
  background-size: contain;
}
#happycell img {
  max-width: 100%;
  position: absolute;
}
.experiment {
  position: relative;
  display: inline-block;
  top: 0;
  text-align: center;
  margin: 0 auto;
  -webkit-mask-image: url("../images/happycell_mask.png");
  -o-mask-image: url("../images/happycell_mask.png");
  -moz-mask-image: url("../images/happycell_mask.png");
  mask-image: url("../images/happycell_mask.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  clip-path: url("../images/clip.svg#svgClip");
}
#c {
  position: inherit;
  height: 100%;
  width: 100%;
  opacity: 1;
}
#c img {
  width: 100%;
  height: 100%;
}

＆＃13;

<!-- SVG clip-path-->

<svg width="500" height="992" viewBox="0 0 500 992" viewPort="0 0 500 992" x="100" y="100" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <defs>
  <clipPath id="svgClip" transform="translate(96 340)" clipPathUnits="objectBoundingBox">
<path id="svgPath" d="M484.3,370.9c-9-26.7-18.1-57.9-26.8-88.2c-5.8-20.3-11.4-39.4-16.6-55.9c-4.3-13.8-7.9-26.9-11.3-39.7
c-4.7-17.3-9.5-35.3-16.3-55c-4.9-14.2-9.9-31-15.2-48.8c-3.7-12.4-7.5-25.2-11.4-37.4c-3.6-11.4-7-23.7-10.2-35.4
c-0.4-1.4-0.8-2.4-1.2-3.4c0,0-8.4-7.2-123.1-7.2S125.8,7.4,125.8,7.4c-1.3,3.9-2.6,7.2-3.7,11.1c-6.4,21.5-15.7,51.9-22.6,72.3
c-12.4,36.8-24.4,79-36,119.9c-2.4,8.4-4.8,16.8-7.2,25.2c-5.7,20-13,43.1-20.6,67.5c-8.5,27-17.3,55-23.6,77.8l-0.8,2.9
c-7.9,28.5-14.7,53.1-9.7,82.2c4,23.4,20.5,46.1,40.8,56.2c15.6,7.8,32.8,15.6,52.6,19.8c18,3.8,39.2,7.9,60.7,9.1
c8.4,0.5,17.1,1.1,25.5,1.8c17.1,1.3,34.8,2.7,52,2.7c2.7,0,5.3,0,7.9-0.1c41.3-1.1,85.8-2.7,131.3-7.1
c28.4-2.7,70.4-14.3,95.7-33.3c20.8-15.6,31.2-37.3,31.7-66.1C500.3,422,491.8,393,484.3,370.9z"/>
  </clipPath>

</defs>
</svg>


<body>
  <div id="header">
    <div class="info"></div>
  </div>

  <div id="happycell">
    <div class="experiment">
      <canvas id="c"></canvas>
      <script src="js/index.js"></script>
    </div>
  </div>

</body>

＆＃13;

感谢。

SVG剪辑路径调整大小问题

0 个答案: