Question

我正在尝试使用clipPath创建一个具有位图模式和一种复杂形状的响应式SVG。

如果我使用<polygon>代替<path>创建更简单的形状，他们会有回应，但我还没有使用路径达到同样的目标，任何关于如何实现此目的的想法或即使可能吗？

<!-- Path Test-->
<div class="mainContainer">
  <div class="assetContainer">
    <div class="asset">
      <svg width="0" height="0">
        <defs>
          <clipPath id="pathTest">
            <path d="M 0.1562378,0.5 H 323.76366 c 0,0 -20.4244,6.3661 -21.48541,47.4801 -1.06101,41.1141 19.8939,42.7056 21.22016,43.2361 1.32626,0.5305 -323.3421722,0 -323.3421722,0 0,0 19.6286472,-1.8568 19.8938992,-42.9708 C 20.315389,7.1313 0.1562378,0.5 0.1562378,0.5 Z"
            />
          </clipPath>

          <pattern x="0" y="0" width="84" height="70" id="img7" patternUnits="userSpaceOnUse">
            <image xlink:href="http://i.imgur.com/T66UMJs.png" width="84" height="70" x="0" y="0" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#img7)" clip-path="url(#pathTest)" />
      </svg>
    </div>
  </div>
</div>


/* CSS */

svg {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.assetContainer {
  overflow: visible;
  height: 100px;
  position: relative;
  width: 100%;
}

.asset {
  position: absolute;
  width: 100%;
  height: 70px;
  bottom: 0px;
  left: 0px;
  cursor: pointer;
  z-index: auto;
  left: 0px;
}

.container {
  width: 400px;
  height: 400px;
  background: gray;
  position: relative;
  margin-bottom: 20px;
}

.mainContainer {
  background: rebeccapurple;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  position: absolute;
  //overflow: hidden;
}

Answer 1

将<clipPath>转换为使用clipPathUnits="objectBoundingBox"。使用objectBoundingBox单位时，剪辑路径坐标将映射到它们应用于的元素的边界框。（0,0）映射到元素的左上角。（1,1）映射到右下角。

您需要重新定义路径（或应用转换以将坐标转换为此范围）。但是一旦你这样做，它会自动缩放以适合你应用的任何东西。

是否可以使用<path>响应来制作SVG clipPath？

1 个答案: