svg 文本掩码截断文本答案

【问题标题】：svg text mask cutting off textsvg 文本掩码截断文本
【发布时间】：2020-02-11 16:00:43
【问题描述】：

我一直在寻找解决方案，但显然有几种不同的方式可以将掩码与文本一起使用，因此希望有人可以纠正我在这里遇到的任何问题。

这是密码笔

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>

【问题讨论】：

标签： css svg

【解决方案1】：

那个 codepen 是 404。您的图片 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>

【讨论】：