Responsive Svg ClipPath mit Hintergrundbild

Question

Ich muss ein SVG als Beschneidungspfad auf einen Container mit einem sich wiederholenden Hintergrundbild anwenden. Der Effekt bedeutet in diesem Fall einen strukturierten Hintergrund für ein Stück SVG-Text.

Ich habe es geschafft, dies mit dem folgenden zu arbeiten;

<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> 

Und die scss wie folgt;

.word { 
    @extend %textured-background; 
    width: 50%; 
    height:500px; 
    clip-path: url(#clipPath); 
    } 

Das Problem ist, dass dies den SVG-Beschneidungspfad nicht skaliert. Als ich einige Nachforschungen anstellte, fand ich, dass der ClipPath den clipPathUnits="objectBoundingBox" Wert haben sollte. Sobald dies jedoch angewendet wird, verschwindet alles vom Bildschirm.

Ich denke, das hat etwas mit Unit-Werten zwischen 0 und 1 zu tun. Das Problem ist, dass diese SVG komplex ist, exportiert von Illustrator.

Jede Anleitung hier wird sehr geschätzt.

Answer 1

Wie Sie bereits herausgefunden haben, müssen Sie Ihren Weg konvertieren koordiniert, so dass sie im Bereich von 0 bis 1.

Angenommen, Ihren Clip-Pfad sind, ist die Größe Ihrer viewBox (550,6 x 144,52), dann Sie müssen Ihre X-Koordinaten um (1/550.6) und Ihre Y-Koordinaten um (1/144.52) skalieren.

So versuchen die Pfade in einer Gruppe Einwickeln, die die entsprechende Skalierung hat angewendet Transformations:

<clippath id="clipPath"> 
    <g transform="scale(0.00182 0.00692)"> 
    <path ... /> 
    <path ... /> 
    <path ... /> 
    <path ... /> 
    </g> 
</clippath> 

Update/Korrektur

ich vergessen. Gruppen sind in clipPfads nicht zulässig. Sie müssen die Transformation zu jedem Pfad hinzufügen.

<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> 

Wenn der Pfad bereits eine Transformation enthält, stellen Sie sicher, dass Sie die Skalierung vor dem Rest der Transformation platzieren.

<clippath id="clipPath"> 
    <path ... transform="scale(0.00182 0.00692) translate(-12.27 -345.86)"/> 
    etc 
</clippath>