path clip path text

by Richard Hunter

HTML

<svg width="0" height="0" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="MyPath" fill="none" stroke="red" d="M0.100 0.900Q 0.900 0.900 0.900 0.450 0.900 0.100 0.500 0.100 0.100 0.100 0.100 0.400 0.100 0.700 0.450 0.700 0.700 0.700 0.750 0.500"/>
  </defs>
  <clipPath id="text" clipPathUnits="objectBoundingBox">
    <text font-size="0.25">
      <textPath href="#MyPath">&#xD;
        Quick brown fox jumps over the lazy dog.&#xD;
      </textPath>
    </text>
  </clipPath>
</svg>

<div class="container">
  <div class="foo"></div>
</div>

<div class="container">
  <div class="foo"></div>
</div>

CSS

body {
  background: green;
}
.container {
  border: solid 1px black;
  margin-bottom: 10px;
}
.foo {
  width: 800px;
  height: 500px;
  background: pink;
  clip-path: url(#text);
}