Diagonal Schnitt auf einem Text auf dem Weg einer Svg-Linie

Ich brauche einen Schrägschnitt auf den Text. Immer wenn sich eine SVG-Linie über den Text bewegt, sollte der Text diagonal geschnitten werden. Ist es möglich, diese Art von Szenario zu erreichen? ? Unten ist der Code. Und ein Bild von dem, was ich zu erreichen.Diagonal Schnitt auf einem Text auf dem Weg einer Svg-Linie

<!DOCTYPE html> 
 
<html> 
 
<head><title></title> 
 
<style type="text/css"> 
 
h1{ 
 
\t position: absolute; 
 
\t top:0; 
 
\t left: 10px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
\t <svg height="210" width="500"> 
 
\t <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
\t <line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2"> 
 
\t \t <animateTransform attributeName="transform" 
 
     type="translate" 
 
     values="200 200;-150 -150;200 200" 
 
     begin="0s" 
 
     dur="5s" 
 
     repeatCount="indefinite" 
 
    /> 
 
\t </line> 
 
\t </svg> 
 
<h1>OUR<br>WORK</h1> 
 

 
\t 
 
</body> 
 
</html>

Quelle

2016-06-20 Anusha Sajeendran

Hier ist eine Version vollständig in SVG.

<html> 
 
<head><title></title> 
 
<style type="text/css"> 
 
h1{ 
 
\t position: absolute; 
 
\t top:0; 
 
\t left: 10px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
\t <svg height="210" width="500"> 
 
\t <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
\t <line x1="150" y1="150" x2="200" y2="200" style="stroke:rgb(0, 0, 153);stroke-width:2"> 
 
\t \t <animateTransform attributeName="transform" 
 
     type="translate" 
 
     values="200 200;-150 -150;200 200" 
 
     begin="0s" 
 
     dur="5s" 
 
     repeatCount="indefinite" 
 
    /> 
 
\t </line> 
 
    <defs> 
 
     <clipPath id="clip1"> 
 
     <polygon points="0, 0 200, 200, 0, 200"/> 
 
     </clipPath> 
 
     <clipPath id="clip2"> 
 
     <polygon points="0, 0 200, 0, 200, 200"/> 
 
     </clipPath> 
 
    </defs> 
 
    <text x="0" y="42" font-size="33px" font-weight="bold" clip-path="url(#clip1)">OUR<tspan x="0" dy="36">WORK</text> 
 
    <text x="4" y="38" font-size="33px" font-weight="bold" clip-path="url(#clip2)">OUR<tspan x="4" dy="36">WORK</text> 
 
\t </svg> 
 
</body> 
 
</html>

Quelle

2016-06-20 08:17:39

Diagonal Schnitt auf einem Text auf dem Weg einer Svg-Linie

Antwort

Verwandte Themen