heskir
Reputation: 15
SVG change clipPath background color
I want to create a landing page, with a colored div and with a clip-path in it, in order to show a video running in the background. For now, the background appears greyish for a reason I don't get.
I tried multiple things and I can't get it working.
Here is my code :
.video_home_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.video_home_background {
background: green;
position: absolute;
top: 0;
left: 0;
z-index: 11;
width: 100vw;
height: 100vh;
clip-path: url(#mask);
}
.video {
position: relative;
z-index: 5;
}
.video_home_overlay_logo {
position: absolute;
top: 0;
left: 0;
z-index: 7;
max-width: 100%;
height: 100%;
}
.video_home_overlay_logo path {
transform: scale(.8) translateY(40%);
}<div class="video_home_container">
<div class="video_home_background">
<video class="video" autoplay loop width="100%">
<source src="<?php echo get_template_directory_uri(); ?>/static/home.mp4"
type="video/mp4">
</video>
</div>
<svg class="video_home_overlay_logo" width="100%" height="100%" >
<clipPath id="mask">
<path d="M587.505 411.454H487.962V312.839H587.505V213.814H487.962V115.145H587.505V11.1746H352.65V498.674L587.505 480.804V411.454Z" fill="black"/>
<path d="M767.851 437.958H816.106L818.101 463.206L949.97 453.124L884.39 11.1746H688.473L626.664 477.88L765.282 467.305L767.851 437.958ZM791.924 126.976C798.809 213.814 805.695 286.68 812.581 345.574H765.856C769.545 299.641 778.043 226.684 791.924 126.976Z" fill="black"/>
<path d="M1650.44 343.198V304.479H1515.13V388.065C1515.13 396.481 1514.91 403.422 1514.69 409.925L1648.58 399.706C1649.92 383.12 1650.44 364.648 1650.44 343.198Z" fill="black"/>
<path d="M1465.8 393.175V151.351C1465.8 124.792 1467.42 107.796 1470.5 99.7077C1473.59 91.6196 1480.48 88.122 1491.63 88.122C1501.43 88.122 1507.83 91.3464 1510.92 97.7404C1514 104.134 1515.12 120.748 1515.12 146.679V255.568H1650.44V188.048C1650.44 139.465 1646.39 103.724 1638.3 80.8264C1630.11 58.1469 1613.11 38.6917 1587.21 22.8434C1561.11 7.92411 1528.24 0 1488.56 0C1459.16 0 1433.1 4.94583 1410.66 14.7554C1387.9 25.0295 1370.08 38.6918 1357.54 55.961C1345.28 71.7054 1337.34 90.3858 1334.54 110.146C1331.8 128.863 1330.55 157.117 1330.55 194.524V346.723C1330.23 372.486 1331.77 398.238 1335.16 423.778L1466.32 413.75C1466.08 407.629 1465.8 401.044 1465.8 393.175Z" fill="black"/>
<path d="M1824.8 11.1746H1689.57V318.987C1689.57 351.175 1689.87 376.888 1690.69 396.589L1824.8 386.369V11.1746Z" fill="black"/>
<path d="M1999.23 11.1746H1863.98V383.337L1999.23 373.035V11.1746Z" fill="black"/>
<path d="M2334.43 115.145V11.1746H2038.34V115.145H2118.51V363.69L2253.82 353.607V115.145H2334.43Z" fill="black"/>
<path d="M1117.09 296.635H1124.63C1143.27 296.635 1154.69 299.805 1159.06 306.855C1163.27 312.948 1165.59 328.25 1165.89 352.514C1165.89 354.208 1165.89 425.17 1165.89 436.674L1291.58 427.083V394.294C1291.58 352.268 1290.46 326.528 1288.25 317.293C1284.93 305.884 1279.04 295.387 1271.04 286.607C1261.58 275.349 1243.56 266.441 1216.96 259.884C1246.42 256.96 1266.34 248.626 1276.31 234.69C1286.28 220.755 1291.45 193.539 1291.45 153.044C1291.45 108.669 1284.26 76.2892 1270.24 56.0416C1256.23 35.794 1237.45 22.8422 1214.77 17.9784C1192.1 13.1146 1149 11.1746 1085.04 11.1746H989.237V450.145L1117.09 440.39V296.635ZM1117.09 99.8977H1124.63C1140.18 99.8977 1151.27 102.33 1156.96 107.822C1162.8 112.686 1165.73 122.741 1165.89 138.671V172.964C1165.54 193.512 1162.48 205.426 1156.96 209.224C1150.53 213.732 1140.01 215.7 1124.63 215.7H1117.09V99.8977Z" fill="black"/>
<path d="M288.084 503.674C297.204 494.512 303.729 483.093 306.993 470.584C311.173 454.791 313.551 423.613 313.551 376.724V194.523C313.551 145.12 311.938 111.921 308.714 95.3892C305.688 78.3871 298.062 62.5389 286.663 49.5657C274.613 35.9034 256.879 26.0119 233.926 19.5086C210.755 13.7431 166.735 11.0652 101.375 11.0652H0V525.643L288.084 503.674ZM128.781 99.7885H135.312C150.395 99.7885 160.396 101.401 165.369 104.625C168.052 106.178 170.376 108.281 172.189 110.796C174.002 113.311 175.263 116.18 175.889 119.216C177.477 130.072 178.199 141.036 178.048 152.006V378.691C177.556 406.508 175.315 423.75 171.435 430.608C166.926 438.286 155.259 442.358 135.312 442.358H128.781V99.7885Z" fill="black"/>
</clipPath>
</svg>
</div>What would you advise me to do ? I'm beginning with svg clip path so I don't get everything.
Upvotes: 0
Views: 1497
Answers (1)
enxaneta
Reputation: 33072
I suspect that what you are seeing is just a tiny part of the video.
This is how I would do it:
For the clippath I'm using clipPathUnits="objectBoundingBox"
objectBoundingBox
This value indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.
In order to make it having a length of 1 unit value I'm scaling it transform="scale(0.0004)"
In order to get this value (0.0004) you need first to get the bounding box of the elements inside the clipping path and divie 1 by the width: 1 / clip.getBBox().width
.video_home_background {
background: green;
width: 100vw;
clip-path: url(#clip);
}<svg class="video_home_overlay_logo" width="0" height="0" >
<clipPath id="clip" clipPathUnits="objectBoundingBox"
transform="scale(0.0004)">
<path d="M587.505 411.454H487.962V312.839H587.505V213.814H487.962V115.145H587.505V11.1746H352.65V498.674L587.505 480.804V411.454Z" fill="black"/>
<path d="M767.851 437.958H816.106L818.101 463.206L949.97 453.124L884.39 11.1746H688.473L626.664 477.88L765.282 467.305L767.851 437.958ZM791.924 126.976C798.809 213.814 805.695 286.68 812.581 345.574H765.856C769.545 299.641 778.043 226.684 791.924 126.976Z" fill="black"/>
<path d="M1650.44 343.198V304.479H1515.13V388.065C1515.13 396.481 1514.91 403.422 1514.69 409.925L1648.58 399.706C1649.92 383.12 1650.44 364.648 1650.44 343.198Z" fill="black"/>
<path d="M1465.8 393.175V151.351C1465.8 124.792 1467.42 107.796 1470.5 99.7077C1473.59 91.6196 1480.48 88.122 1491.63 88.122C1501.43 88.122 1507.83 91.3464 1510.92 97.7404C1514 104.134 1515.12 120.748 1515.12 146.679V255.568H1650.44V188.048C1650.44 139.465 1646.39 103.724 1638.3 80.8264C1630.11 58.1469 1613.11 38.6917 1587.21 22.8434C1561.11 7.92411 1528.24 0 1488.56 0C1459.16 0 1433.1 4.94583 1410.66 14.7554C1387.9 25.0295 1370.08 38.6918 1357.54 55.961C1345.28 71.7054 1337.34 90.3858 1334.54 110.146C1331.8 128.863 1330.55 157.117 1330.55 194.524V346.723C1330.23 372.486 1331.77 398.238 1335.16 423.778L1466.32 413.75C1466.08 407.629 1465.8 401.044 1465.8 393.175Z" fill="black"/>
<path d="M1824.8 11.1746H1689.57V318.987C1689.57 351.175 1689.87 376.888 1690.69 396.589L1824.8 386.369V11.1746Z" fill="black"/>
<path d="M1999.23 11.1746H1863.98V383.337L1999.23 373.035V11.1746Z" fill="black"/>
<path d="M2334.43 115.145V11.1746H2038.34V115.145H2118.51V363.69L2253.82 353.607V115.145H2334.43Z" fill="black"/>
<path d="M1117.09 296.635H1124.63C1143.27 296.635 1154.69 299.805 1159.06 306.855C1163.27 312.948 1165.59 328.25 1165.89 352.514C1165.89 354.208 1165.89 425.17 1165.89 436.674L1291.58 427.083V394.294C1291.58 352.268 1290.46 326.528 1288.25 317.293C1284.93 305.884 1279.04 295.387 1271.04 286.607C1261.58 275.349 1243.56 266.441 1216.96 259.884C1246.42 256.96 1266.34 248.626 1276.31 234.69C1286.28 220.755 1291.45 193.539 1291.45 153.044C1291.45 108.669 1284.26 76.2892 1270.24 56.0416C1256.23 35.794 1237.45 22.8422 1214.77 17.9784C1192.1 13.1146 1149 11.1746 1085.04 11.1746H989.237V450.145L1117.09 440.39V296.635ZM1117.09 99.8977H1124.63C1140.18 99.8977 1151.27 102.33 1156.96 107.822C1162.8 112.686 1165.73 122.741 1165.89 138.671V172.964C1165.54 193.512 1162.48 205.426 1156.96 209.224C1150.53 213.732 1140.01 215.7 1124.63 215.7H1117.09V99.8977Z" fill="black"/>
<path d="M288.084 503.674C297.204 494.512 303.729 483.093 306.993 470.584C311.173 454.791 313.551 423.613 313.551 376.724V194.523C313.551 145.12 311.938 111.921 308.714 95.3892C305.688 78.3871 298.062 62.5389 286.663 49.5657C274.613 35.9034 256.879 26.0119 233.926 19.5086C210.755 13.7431 166.735 11.0652 101.375 11.0652H0V525.643L288.084 503.674ZM128.781 99.7885H135.312C150.395 99.7885 160.396 101.401 165.369 104.625C168.052 106.178 170.376 108.281 172.189 110.796C174.002 113.311 175.263 116.18 175.889 119.216C177.477 130.072 178.199 141.036 178.048 152.006V378.691C177.556 406.508 175.315 423.75 171.435 430.608C166.926 438.286 155.259 442.358 135.312 442.358H128.781V99.7885Z" fill="black"/>
</clipPath>
</svg>
<div class="video_home_background">
<video class="video" width="100%" muted autoplay loop>
<source type="video/mp4" src="https://www.w3schools.com/tags/movie.mp4"
type="video/mp4">
</video>
</div>Upvotes: 1
Related Questions
- Clip-path background-image
- How to add path to a clip path
- Converting CSS Clip Path to SVG Clip Path without using an Image
- How to use svg for clip path
- CSS clip-path property having issues with SVG paths
- I want to implement SVG clip-path for SVG element
- svg clipPath doesn't clip
- SVG Clip Path not working
- Problems with SVG clip-path using HTML and CSS
- how to use css clip-path with svg path to mask html element