CodePen Embed - SVG - clipping

<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="300px" viewBox="0 0 800 300" style="outline: 1px solid red">
  <defs>
    <clipPath id="clipTriangle" clipPathUnits="objectBoundingBox">
      <polygon points="0.1,0 1,0.5 0.1,1" />
    </clipPath>
    <clipPath id="clipText">
      <text x="200" y="220" text-anchor="middle" font-size="200">上海</text>
    </clipPath>
    <image id="imgShanghai" href="https://webdav.iflyit.top/share/图片/city-shanghai-1.jpg">
  </defs>
  <use href="#imgShanghai" clip-path="url(#clipTriangle)" />
  <use href="#imgShanghai" clip-path="url(#clipText)" x="50%" />
</svg>

This Pen is owned by iflyit on CodePen.

See more by @iflyit on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.