текстовая маска svg обрезка текста

Question

Я искал решения, но, видимо, есть несколько различных способов использования масок с текстом, так что, надеюсь, кто-то может исправить любую проблему, с которой я здесь сталкиваюсь.

вот кодовое поле

https://codepen.io/cole-pratt/pen/OJVVzYQ

и вот код

text {
  font-size: 50px;
  font-weight: bold;
}

<svg>
  <defs>
    <mask id="texture">
      <image height="400" width="800" xlink:href="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.segurohealthandsafety.co.uk%2Fproduct%2Frisk-assessment-method-statement-for-tarmac-planing%2F&psig=AOvVaw291PiCwBSaQHcImwV4v0pK&ust=1581467576139000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCNji7fqfyOcCFQAAAAAdAAAAABAH">
    </mask>
  </defs>
  <text x="100" y="100" font-family="arial" mask="url(#texture)">Texture</text>
</svg>

Answer 1

Кодовый указатель 404. У вас есть неэкранированные символы в URL вашего изображения. URL изображения недействителен. Если вы замените URL текстурой изображения, я думаю, вы пытаетесь использовать - все работает отлично.

text {
  font-size: 50px;
  font-weight: bold;
}

<svg >
  <defs>
    <mask id="texture">
      <image height="400" width="800" xlink:href="https://www.segurohealthandsafety.co.uk/wp-content/uploads/2016/05/Tarmac-Planing-risk-assessment.jpg">
    </mask>
  </defs>
  <text x="100" y="100" font-family="arial" mask="url(#texture)">Texture</text>
</svg>