Ist es möglich, SVG -Textelemente wie ein normales Blockelement zu positionieren, ohne Positionsattribute zu verwenden? ⇐ CSS

[Anonymous]

Ich spiele mit diesem Tutorial herum, um ein SVG -Textelement zu verwenden, um ein vom Text abgeschnittenes Video zu rendern.

Code: Select all

      

OCEAN

Ich war neugierig, ob es möglich ist, den Text zu positionieren, indem ich nur Anzeige verwendet: Block auf svg , clippath und text Elemente, aber es sieht nicht so aus. Text < /code> Element oder gibt es eine andere Möglichkeit, es wie ein Display zu rendern: Block < /code> Element im Wrapper-Container? PrettyPrint-Override ">

Code: Select all

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-image: url(https://design2seo.com/assets/blog/svg-clipping/home_intro_bg.jpg);
background-position: center center;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
.wrapper {
position: relative;
width: 65%;
height: 20%;
margin: 2rem auto 0 auto;
}
video {
width: 100%;
height: 100%;
background: rgba(0, 100, 0, 0.9);
}
svg {
display: block;
background: rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
}

.clipped-video {
-webkit-clip-path: url(#text-overlay);
clip-path: url(#text-overlay);
}

clipPath {
display: block;
}
text {
display: block;
font-family: sans-serif;
font-weight: 900;
font-size: 18vw;
}< /code>



Home














OCEAN