我需要将SVG应用为具有重复背景图像的容器的剪切路径。在这种情况下，效果将意味着一段SVG文本的纹理背景。
我已设法使用以下内容;
<div class="word">
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550.6 144.52" height="0" width="0">
<clippath id="clipPath">
<path d="M203.78,426.6c-3.26,1.51-6.26,3.11-9.41,4.3-2.56,1-5.18,2.74-8.09,1.33a15.48,15.48,0,0,1-8.19-8.66c-0.43-1.16-.88-2.31-1.48-3.87-1,1.15-2,2.05-2.73,3.07-3.88,5-9.15,8.19-14.83,10.67-2.65,1.16-5.54,1.49-8.05-.55s-2.82-4.79-2.31-7.72a30.69,30.69,0,0,0,.81-6.31c-2,1.17-4,2.3-6,3.51-3.24,2-6.31,4.28-9.7,5.92a11,11,0,0,1-10.79-.4c-1.7-1-2.7-.72-4.14.84-4.74,5.12-9.69,10-14.74,14.85s-12,2.27-15.12-2.86c-4.25-7-3.87-14.55-2.49-22.05A328.77,328.77,0,0,1,100.28,369c0.72-2-.09-2.56-1.71-2.87-4.08-.77-8.16-0.92-12,1A35.93,35.93,0,0,0,82.65,370c-0.55.38-1.45,0.88-1.86,0.67a2.05,2.05,0,0,1-.84-1.82,6.55,6.55,0,0,1,1.7-2.88c3.9-3.47,8.67-4.39,13.71-4.28a32.55,32.55,0,0,1,5.47.49c1.8,0.35,2.74-.23,3.51-1.86,1.76-3.76,3.71-7.43,5.58-11.15,1.77-3.52,2.84-4.15,6.17-2.11a45.54,45.54,0,0,1,7.63,6.59c0.38,0.37,0,1.91-.42,2.63-1,1.61-2.35,3-3.5,4.55a24.48,24.48,0,0,0-1.39,2.47c4.27,0.19,7.87-.13,11.38-1.67a17,17,0,0,1,3.9-.72,17.47,17.47,0,0,1-1.69,3.61c-3,3.82-6.76,5.41-11.65,4-3.58-1-4.93-.35-6.06,2.76-3.63,10-7.36,20-10.65,30.06-1.4,4.31-1.81,8.95-2.65,13.44-0.67,3.59-1.68,7.16-1.88,10.78a42.52,42.52,0,0,0,1,9.38,3.33,3.33,0,0,0,4.64,2.43,20.31,20.31,0,0,0,5.25-4c1.91-2.06,3.39-4.53,5.15-6.74,2.38-3,3.92-6,3.82-10.14-0.11-5,2.46-9.38,5.46-13.15,4.09-5.13,8.59-9.95,14.77-12.8a22,22,0,0,1,15.29-1.67c3,0.8,4.69,3.32,4.7,7.1,0,2.37-1.84,4.35-5.09,5.23a32.4,32.4,0,0,0,0-4.85c-0.53-3.42-1.49-4-4.35-2.19a43.11,43.11,0,0,0-14.59,14.75,60.08,60.08,0,0,0-4.66,9.62c-1.48,4-.25,5.4,3.88,4.66a12.31,12.31,0,0,0,4.61-1.7c5.25-3.52,10.38-7.22,15.53-10.88A5,5,0,0,0,156,409c1-1.79,2.46-2.07,4.25-1.72,5.18,1,5.94,3.47,3.08,7.9a115,115,0,0,0-6.27,11.9c-0.81,1.64-.1,2.78,1.78,2.22a14.21,14.21,0,0,0,5.32-2.46,125.49,125.49,0,0,0,10.43-10.38,8.24,8.24,0,0,0,1.5-4.77A73.31,73.31,0,0,1,181.79,386c0.79-1.81,1.83-2.51,3.84-2.25,6.33,0.81,9.86,5.14,12.65,10.18,0.46,0.83-.43,2.82-1.23,3.87a42.35,42.35,0,0,0-9,25.41c-0.08,3.57,1.24,4.64,4.6,3.27a55.2,55.2,0,0,0,8.59-4.5c3-1.91,4.48-4.77,5-8.47,0.91-6.65,2.32-13.25,3.68-19.83a13.85,13.85,0,0,1,2-4c3.56-5.93,6.8-6.23,13.57-3.47a19.47,19.47,0,0,1,2.92,1.91,3.13,3.13,0,0,1,1.2,4.54c-1.55,2.73-3,5.64-5.1,7.91a26.82,26.82,0,0,0-7.62,18.7,49.6,49.6,0,0,1-.58,5.3l0.58,0.31a16.68,16.68,0,0,0,2.24-1.68c7.29-7.64,14.53-15.33,21.86-22.94,0.95-1,1.62-3.32,3.65-1.91s0.39,3-.28,4.38a50.23,50.23,0,0,1-10.79,14.57c-5.63,5.43-11.46,10.64-17.06,16.1a8.44,8.44,0,0,0-2,4.11c-1.24,5.69-2.06,11.47-3.43,17.12-3.61,14.91-12,26.35-25.59,33.67-6,3.22-12.14,2.5-17.88-.85-4.89-2.85-6.28-8.44-4.15-14.51a36,36,0,0,1,11.49-15.75c7.68-6.35,15.66-12.35,23.74-18.19C203.7,435.37,204.92,433.24,203.78,426.6Zm-2.84,20.54-0.84-.42c-5.56,4.21-11.44,8.07-16.6,12.71-6.16,5.54-12.18,11.35-15,19.62-1.66,5,.24,7.64,5.45,7.34,4.16-.24,7.13-2.53,9.69-5.5,7.29-8.45,13.4-17.58,16-28.64Zm18-49.36,0.89,0.45c1.54-2.22,3.12-4.42,4.58-6.69a3.59,3.59,0,0,0-.05-1.74,3,3,0,0,0-1.54.14A11.5,11.5,0,0,0,218.92,397.78Z" transform="translate(-12.27 -345.86)"/>
<path d="M514.79,416.66c-2.39,2.92-4.3,5.53-6.5,7.87A31.22,31.22,0,0,1,493,434c-5.5,1.36-9.24-2.46-8.43-8.15a40.68,40.68,0,0,0,.86-6.94,58.75,58.75,0,0,0-6,3.64c-3.84,3-7.63,5.79-12.6,6.72-4,.74-7.26-0.69-10.32-2.7-1.05-.69-1.37-2.49-2.18-4.07a18.89,18.89,0,0,0-2,1.8c-4.09,4.81-9.58,7.53-15.34,9.42A16.38,16.38,0,0,1,425,432.56c-2.31-1.08-3.06-3.48-3-5.92,0.05-3.81.31-7.62,0.49-11.77a9.32,9.32,0,0,0-1.63,1c-7.9,7.82-17.37,13.06-27.76,16.69a14.25,14.25,0,0,1-6.38.73,8.08,8.08,0,0,1-4.53-2.56,19.34,19.34,0,0,1-4.7-13.59c0-1.87-.74-2.23-2.53-2.42-4.5-.47-7.41,1-9.44,5.22-1.4,2.94-3.81,5.43-5.94,8a5.94,5.94,0,0,1-6.5,2.07c-3.13-.85-6.33-1.45-9.41-2.45-4.66-1.51-6.15-5.64-6.5-9.81-0.76-9.11,3.31-16.6,9-23.34a2,2,0,0,1,1.51-.71c2.54,0.53,2.74-1.08,3.13-2.93a24.27,24.27,0,0,1,1.87-5.64c1.7-3.49,4.17-4.52,8-3.93,4,0.62,7.86,1.41,10.31,5.2,3.38,5.24,3.78,10.87,2.44,16.77-0.33,1.44-.71,2.87-1.07,4.28,3.55,1.13,6.41-.09,8-3.07,3.66-6.83,8.59-12.46,15.74-15.8,2.93-1.37,6-2,9.2-.94,1.89,0.63,3.86,1,5.79,1.52,5.13,1.41,7.29,5.93,5.08,10.85a20.09,20.09,0,0,1-3,5.25c-1.81,2-5.41,2.34-6.49,1-1.28-1.56-.15-5,2.05-6.8a6.61,6.61,0,0,0,2.17-2.85c0.89-3-.79-4.78-3.82-4.18a7,7,0,0,0-3.21,1.72c-7.58,7-11.62,15.89-13.16,26a13.64,13.64,0,0,0,.42,4.93c0.5,2.19,2.16,3,4.38,2.52a40.4,40.4,0,0,0,21.13-12,19.7,19.7,0,0,1,1.74-1.79c6.47-5.33,9.91-12.59,12.71-20.21,0.71-1.93,1.67-3,3.76-2.74a59.38,59.38,0,0,1,8,1.28c2.72,0.76,3.22,2.51,2.22,5.2-2.89,7.69-5.76,15.39-8.53,23.13-0.48,1.33-.4,2.86-0.66,5a37.51,37.51,0,0,0,4.73-1.47c2.17-1,4.23-2.3,6.36-3.43,5.28-2.8,8.42-7.15,11-12.61a36,36,0,0,1,19.59-18.32,19.36,19.36,0,0,1,13-.72c3,0.9,4.69,3.33,4.71,7.11,0,2.37-1.82,4.34-5,5.22a36.68,36.68,0,0,0,0-4.34c-0.45-3.73-1.65-4.49-4.66-2.57a43.33,43.33,0,0,0-14.38,14.63,61.22,61.22,0,0,0-4.66,9.62c-1.49,4-.25,5.4,3.87,4.66a12.3,12.3,0,0,0,4.61-1.7c5.25-3.52,10.38-7.22,15.53-10.88A5,5,0,0,0,492,409c1-1.8,2.46-2.07,4.25-1.72,5.18,1,5.94,3.47,3.08,7.9a115.05,115.05,0,0,0-6.27,11.9c-0.81,1.64-.11,2.75,1.79,2.22,1.73-.48,3.72-1,4.93-2.14,4.81-4.7,9.38-9.65,14-14.54,2.72-2.88,3.39-6.62,4-10.31,2.51-15.88,8.75-30.46,15.52-44.85,1.84-3.91,4.24-7.53,8-10.07a6.73,6.73,0,0,1,7.32-.64c2.37,1.32,4.27,3.31,4.38,6.5a39.94,39.94,0,0,1-7.34,24.66c-3.59,5.2-7.91,9.91-11.34,15.19-1.94,3-3,6.62-4,10.09-1.09,3.66-1.59,7.48-2.51,11.19-1.31,5.27.12,10.24,1.5,15.22,0.54,2,2.25,2.58,4.18,1.66a23.54,23.54,0,0,0,9.6-8.49q8.25-12.5,16.6-24.93a14.66,14.66,0,0,1,2.21-2.15l1,0.77c-1.27,2.21-2.47,4.47-3.83,6.63-2.77,4.43-5.89,8.66-8.36,13.24-4.34,8.06-9.39,15.46-16.47,21.4-4.86,4.08-11.77,3.4-14.73-2.88-2.5-5.31-4.57-10.49-4.39-16.41A11.64,11.64,0,0,0,514.79,416.66ZM535,385.54l0.75,0.32a5.81,5.81,0,0,0,1.16-.83c4.41-5.21,8.89-10.46,11.11-17,1.48-4.35,2.12-9,3-13.53,0.39-2-1.14-3-2.62-3.36-0.82-.18-2.26.73-2.83,1.56A19.24,19.24,0,0,0,542.9,358c-2.09,6.89-4,13.85-6,20.78C536.29,381,535.62,383.27,535,385.54Zm-181.38,19c-3.59,3.2-7.85,12.63-6.7,18.69,0.3,1.56,1.34,2.18,2.46,1.54a59.78,59.78,0,0,0,9.74-6.31c1.61-1.39,2.52-3.94,3-6.13,0.13-.66-2.4-1.85-3.71-2.8a4,4,0,0,1-.57-0.49Zm11.3,3.51c1.06-3.86,2.49-7.28,2.83-10.81,0.31-3.29-.44-6.71-1-10a3.56,3.56,0,0,0-1.89-2c-0.29-.15-1.32.79-1.78,1.41a16.37,16.37,0,0,0-2.86,13C360.71,402.58,361.5,405.73,364.88,408.07Z" transform="translate(-12.27 -345.86)"/>
<path d="M43.08,460.72c-6.52-.46-13.17-0.46-18.92-4.38-8.3-5.67-15.67-19.52-9.74-33.24,4.27-9.9,10-11.39,19.93-9.57,7.46,1.36,11,7.15,9.68,14.55-1.28,6.9-9.67,11.13-15.39,7.75-2.27-1.34-3.2-4.41-1.67-6.47,0.56-.75,1.92-0.92,2.91-1.35,0.17,0.87.39,1.73,0.49,2.6,0.12,1.07.13,2.15,0.19,3.22,1.2-.27,2.67-0.18,3.56-0.86,3.86-2.94,5.23-10,3-13.54-2.14-3.34-5.27-3.87-8.89-3.77-4.52.12-7.37,2.61-9.08,6.35-3.19,7-3.79,14.12.56,21,1.59,2.49,3.35,4.88,5.16,7.21,4.92,6.34,14.63,6,20.42,2,6.85-4.64,10.91-10.81,11.92-19.22,0.93-7.77-.38-15.27-1.41-22.84-1-7.34-2.16-14.65-3.22-22-0.39-2.67-.72-2.93-3.13-1.85-5.07,2.29-10,5-15.2,6.84-7,2.43-13.62,1.55-18.9-4.38-2.34-2.63-2.68-7.55-.36-10.15a4.61,4.61,0,0,1,3.32-1.58,3.51,3.51,0,0,1,2.43,2.42,3.38,3.38,0,0,1-2.3,2.46c-2,0-2,1.18-2,2.43,0,3.48,2.94,6.13,7,6.47,4.93,0.42,9.36-1.3,13.65-3.35,4.5-2.15,8.82-4.66,13.27-6.9A4.62,4.62,0,0,0,53,376.74c1.14-7.78,3.74-15,9-21,3.67-4.26,8-6.57,13.8-5.88a4.45,4.45,0,0,1,4.31,4.09c0.77,5.11-1.37,9.31-4.59,13-2.74,3.11-5.88,5.87-8.65,9a6,6,0,0,0-1.46,3.71,81.16,81.16,0,0,0,3,20.16c2.81,10.76,5.49,21.57,4.9,32.92-0.42,8-3.23,14.65-9.43,19.84C57.83,457.51,51.35,461.31,43.08,460.72Zm33.55-105.4c-5.24.85-11,9.87-9.33,14.41C71,367,76.37,358.73,76.63,355.32Z" transform="translate(-12.27 -345.86)"/>
<path d="M298.7,460.71c-6.36-.45-12.87-0.46-18.44-4.31-8.94-6.18-16.28-20.4-9.09-35,4-8.16,9.85-9.65,19.3-7.84,7.39,1.42,11,7.3,9.53,14.66-1.34,6.78-9.58,10.92-15.26,7.68a4.53,4.53,0,0,1-1.82-6.42c0.53-.78,1.88-1,2.85-1.49,0.19,0.92.43,1.83,0.57,2.76s0.23,2.11.35,3.17c1.13-.26,2.51-0.2,3.36-0.84,3.86-2.88,5.33-10,3.11-13.52-2.1-3.36-5.21-4-8.84-3.88-4.51.09-7.43,2.52-9.15,6.25-3.22,7-3.88,14.11.45,21a86.6,86.6,0,0,0,5.32,7.41c4.79,6.07,14,6,19.8,2.26,7.12-4.52,11.39-10.8,12.43-19.43,0.94-7.76-.34-15.27-1.38-22.85-1-7.33-2.17-14.65-3.23-22-0.41-2.84-.69-3.06-3.26-1.9-5.07,2.29-10,5-15.21,6.83-6.91,2.36-13.46,1.5-18.69-4.34-2.44-2.73-2.82-7.73-.36-10.33a5.06,5.06,0,0,1,3.62-1.44,2.45,2.45,0,0,1-.12,4.85c-2.34,0-2.17,1.41-2.08,2.8,0.22,3.33,3,5.72,6.82,6.08,4.94,0.47,9.38-1.25,13.66-3.28,4.58-2.17,9-4.74,13.49-7a4.62,4.62,0,0,0,2.55-4c1.18-7.78,3.78-15,9-21,3.62-4.16,7.94-6.48,13.6-5.78,2.67,0.33,4.08,1.51,4.45,4.21,0.71,5.2-1.53,9.43-4.86,13.12-2.72,3-5.77,5.74-8.5,8.76a5.68,5.68,0,0,0-1.36,3.51,81.09,81.09,0,0,0,3,20.16c2.84,10.84,5.54,21.73,4.93,33.16-0.42,7.94-3.22,14.47-9.33,19.63S307.15,461.38,298.7,460.71Zm34.43-105.55c-5.8,1.22-11,9.31-9.88,15.09C327.22,365.56,331.11,361.33,333.13,355.16Z" transform="translate(-12.27 -345.86)"/>
<path d="M444.5,374.14c1.48,0.25,2.72.37,3.92,0.69,3,0.81,3.24,2,3,5.05-0.27,3.54-2.65,5.4-4.77,7.46s-9.5.88-11.12-1.34a2.73,2.73,0,0,1-.58-2c1.19-3.46,2.54-6.92,5.92-8.88A13.26,13.26,0,0,1,444.5,374.14Z" transform="translate(-12.27 -345.86)"/>
</clippath>
</svg>
scss如下;
.word {
@extend %textured-background;
width: 50%;
height:500px;
clip-path: url(#clipPath);
}
问题是这不会缩放SVG剪切路径。当我做一些研究时，我发现clipPath应该有clipPathUnits="objectBoundingBox"值。但是，一旦应用此选项，一切都会从屏幕上消失。
我认为这与单位值介于0和1之间有关。问题是这个SVG很复杂，从插图画家导出。
非常感谢任何指导。
答案 0 :(得分：1)
正如您已经想到的那样，您需要转换路径坐标，使它们在0到1的范围内。
假设你的剪辑路径是你的viewBox（550.6 x 144.52）的大小，那么你需要将你的X坐标缩放（1 / 550.6）并将你的Y坐标缩小（1 / 144.52）。
因此，尝试将路径包装在已应用适当缩放变换的组中：
<clippath id="clipPath">
<g transform="scale(0.00182 0.00692)">
<path ... />
<path ... />
<path ... />
<path ... />
</g>
</clippath>
更新/更正
我忘记了。 clipPaths中不允许使用组。您需要将变换添加到每个路径。<clippath id="clipPath">
<path ... transform="scale(0.00182 0.00692) "/>
<path ... transform="scale(0.00182 0.00692)" />
<path ... transform="scale(0.00182 0.00692)" />
<path ... transform="scale(0.00182 0.00692)" />
</clippath>
如果路径已包含变换，请确保将比例放在变换的其余部分之前。
<clippath id="clipPath">
<path ... transform="scale(0.00182 0.00692) translate(-12.27 -345.86)"/>
etc
</clippath>