試圖嘗試在 SVG 路徑中心上屏蔽視頻。但是，繼續失敗，因為它不想掩蓋它。
它在反應應用程式上，但即使在 codepen.io / jsfiddle 上它也不斷失敗。
整個視頻應該被淹沒在心臟本身，但它總是放在它上面。
這是我的嘗試
.example-video {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 1000px;
}
.example-video video {
width: 50%;
}
.example-video svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.example-video svg > path {
-webkit-mask: url(#mask);
mask: url(#mask);
}<div class="example-video">
<video autoPlay="autoplay" controls="true" playsInline mask="url(#mask)" muted loop preload="true" poster="http://i.imgur.com/xHO6DbC.png">
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" />
</video>
<svg version="1.1" id="p.svg" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 980.2914 884.5557" enableBackground="new 0 0 980.2914 884.5557" xmlSpace="preserve">
<path opacity="0.05" fill="#E35D5D" d="M493.9887,130.1238L493.9887,130.1238C419.5373,4.797,257.8407-37.3296,131.6182,36.1312
C4.3062,110.2269-37.5245,274.4576,36.6059,401.6698l215.8423,370.3983c28.1165,48.2495,90.0233,64.5706,138.2729,36.4541
l368.4115-214.6845c127.2958-74.1791,172.7084-240.1479,98.7059-367.5465C783.976,99.1337,621.0024,56.1091,493.9887,130.1238z" />
<path fill="none" stroke="#E35D5D" strokeWidth="3.1978" strokeMiterlimit="10" d="M151.0414,716.6817L151.0414,716.6817
c-2.6854-4.5204-8.5175-6.0399-13.0702-3.3902c-4.592,2.6725-6.1008,8.5961-3.427,13.1844l7.7851,13.3598
c1.0141,1.7403,3.247,2.3289,4.9873,1.3148l13.2881-7.7433c4.5914-2.6756,6.2294-8.6618,3.5602-13.257
C161.5008,715.5639,155.6226,714.0121,151.0414,716.6817z" />
<path fill="none" stroke="#E35D5D" strokeWidth="2.7402" strokeMiterlimit="10" d="M186.6779,44.1803L186.6779,44.1803
c-1.4613-2.4599-4.635-3.2867-7.1125-1.8449c-2.4988,1.4543-3.3199,4.6778-1.8649,7.1747l4.2365,7.2701
c0.5519,0.947,1.767,1.2674,2.714,0.7155l7.2311-4.2138c2.4985-1.456,3.3899-4.7136,1.9374-7.2141
C192.3697,43.572,189.1709,42.7276,186.6779,44.1803z" />
<path fill="none" stroke="#E35D5D" strokeWidth="2.5752" strokeMiterlimit="10" d="M978.3951,400.8979
c-0.5042,0.934-0.5042,2.0591,0,2.993c0.3052,0.4453,0.5839,0.9083,0.835,1.3862c0.5513,1.3705-0.4096,2.8669-1.3862,3.9854
c-0.6144,0.7089-1.3075,1.6697-0.8979,2.5203c0.1919,0.3133,0.4371,0.5904,0.7246,0.8192c2.0887,2.0325,2.1343,5.3734,0.1018,7.4622
c-0.5895,0.6058-1.3159,1.0612-2.1182,1.3277" />
<defs>
<mask id="mask">
<path fill="#ffffff" d="M528.4855,192.3897L528.4855,192.3897C454.034,67.0629,292.3375,24.9363,166.115,98.3971
C38.8029,172.4928-3.0277,336.7236,71.1027,463.9358L286.945,834.3341c28.1165,48.2495,90.0233,64.5706,138.2729,36.4541
l368.4115-214.6845c127.2958-74.1792,172.7084-240.1479,98.7059-367.5465C818.4728,161.3996,655.4992,118.375,528.4855,192.3897z" />
</mask>
</defs>
<g>
<path fill="none" stroke="#E35D5D" strokeWidth="7" strokeLinecap="round" strokeMiterlimit="10" d="M747.8805,524.349
c108.1955-68.637,139.1927-213.677,70.5558-321.8725S606.4696,62.2462,498.2741,130.8832l0,0" />
</g>
</svg>
</div>uj5u.com熱心網友回復：
我似乎無法讓 SVG 蒙版在視頻元素上作業 - 所以你可能想嘗試一些更簡單的東西，如下所示。（您必須回傳并重做您的心形，以使其符合視頻元素的縱橫比）。
video {
position: absolute;
z-index: -10;
width: 50%;
height: 30%;
}
svg {
position: absolute;
z-index: 5;
margin: 0;
padding: 0;
top: 7px;
left: 7px;
width: 52%;
height: 32%;
} <video autoPlay="autoplay" controls="true" playsInline muted loop preload="true" poster="http://i.imgur.com/xHO6DbC.png">
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" />
</video>
<svg x="0px" y="0px" viewBox="0 0 980 950" preserveAspectRatio="xMidYMid meet">
<defs>
<mask id="myMask">
<rect fill="white" x="0%" y="0%" height="100%" width="100%"/>
<path fill="black" d="M528.4855,192.3897L528.4855,192.3897C454.034,67.0629,292.3375,24.9363,166.115,98.3971
C38.8029,172.4928-3.0277,336.7236,71.1027,463.9358L286.945,834.3341c28.1165,48.2495,90.0233,64.5706,138.2729,36.4541
l368.4115-214.6845c127.2958-74.1792,172.7084-240.1479,98.7059-367.5465C818.4728,161.3996,655.4992,118.375,528.4855,192.3897z" />
</mask>
</defs>
<rect x="0%" y="0%" width="100%" height="100%" fill="white" mask="url(#myMask)" stroke="white"/>
</svg>uj5u.com熱心網友回復：
您可以使用clip-path或mask。我并不完全清楚為什么您的掩碼不起作用，但請嘗試清理代碼。
video {
/*clip-path: url(#clip);*/
mask: url(#mask);
}<div class="example-video">
<video autoPlay="autoplay" controls="true" muted loop preload="true" poster="http://i.imgur.com/xHO6DbC.png">
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" />
</video>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip">
<path transform="translate(130) scale(.8)" d="M 264 96 L 264 96 C 227 34 146 12 83 49 C 19 86 -2 168 36 232 L 143 417 c 14 24 45 32 69 18 l 184 -107 c 64 -37 86 -120 49 -184 C 409 81 328 59 264 96 z" />
</clipPath>
<mask id="mask">
<path fill="white" transform="translate(130) scale(.8)" d="M 264 96 L 264 96 C 227 34 146 12 83 49 C 19 86 -2 168 36 232 L 143 417 c 14 24 45 32 69 18 l 184 -107 c 64 -37 86 -120 49 -184 C 409 81 328 59 264 96 z" />
</mask>
</defs>
</svg>
</div>uj5u.com熱心網友回復：
行內 cssmask-image可能是一種更方便的方法，因為遮罩影像允許更好地回應縮放遮罩元素。
示例：掩碼影像
video {
display: block;
width: 100%;
aspect-ratio: 16/9;
}
.example-video {
width: 50%;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
.svgBG {
position: absolute;
width: 100%;
height: 100%;
top: 10%;
left: 10%;
right: 0%;
bottom: 0%;
}
.masked {
-webkit-mask-image: url("data:image/svg xml,");
mask-image: url("data:image/svg xml,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
}<div class="example-video">
<svg class="svgBG" id="p.svg" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 980.2914 884.5557">
<path opacity="0.05" fill="#E35D5D" d="M493.9887,130.1238L493.9887,130.1238C419.5373,4.797,257.8407-37.3296,131.6182,36.1312 C4.3062,110.2269-37.5245,274.4576,36.6059,401.6698l215.8423,370.3983c28.1165,48.2495,90.0233,64.5706,138.2729,36.4541 l368.4115-214.6845c127.2958-74.1791,172.7084-240.1479,98.7059-367.5465C783.976,99.1337,621.0024,56.1091,493.9887,130.1238z" />
<path fill="none" stroke="#E35D5D" strokeWidth="3.1978" strokeMiterlimit="10" d="M151.0414,716.6817L151.0414,716.6817c-2.6854-4.5204-8.5175-6.0399-13.0702-3.3902c-4.592,2.6725-6.1008,8.5961-3.427,13.1844l7.7851,13.3598c1.0141,1.7403,3.247,2.3289,4.9873,1.3148l13.2881-7.7433c4.5914-2.6756,6.2294-8.6618,3.5602-13.257C161.5008,715.5639,155.6226,714.0121,151.0414,716.6817z" />
<path fill="none" stroke="#E35D5D" strokeWidth="2.7402" strokeMiterlimit="10" d="M186.6779,44.1803L186.6779,44.1803c-1.4613-2.4599-4.635-3.2867-7.1125-1.8449c-2.4988,1.4543-3.3199,4.6778-1.8649,7.1747l4.2365,7.2701c0.5519,0.947,1.767,1.2674,2.714,0.7155l7.2311-4.2138c2.4985-1.456,3.3899-4.7136,1.9374-7.2141C192.3697,43.572,189.1709,42.7276,186.6779,44.1803z" />
<path fill="none" stroke="#E35D5D" strokeWidth="2.5752" strokeMiterlimit="10" d="M978.3951,400.8979
c-0.5042,0.934-0.5042,2.0591,0,2.993c0.3052,0.4453,0.5839,0.9083,0.835,1.3862c0.5513,1.3705-0.4096,2.8669-1.3862,3.9854c-0.6144,0.7089-1.3075,1.6697-0.8979,2.5203c0.1919,0.3133,0.4371,0.5904,0.7246,0.8192c2.0887,2.0325,2.1343,5.3734,0.1018,7.4622c-0.5895,0.6058-1.3159,1.0612-2.1182,1.3277" />
<g>
<path fill="none" stroke="#E35D5D" strokeWidth="7" strokeLinecap="round" strokeMiterlimit="10" d="M747.8805,524.349 c108.1955-68.637,139.1927-213.677,70.5558-321.8725S606.4696,62.2462,498.2741,130.8832l0,0" />
</g>
</svg>
<video class="masked" autoPlay="autoplay" controls="true" muted loop preload="true" poster="http://i.imgur.com/xHO6DbC.png">
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" />
</video>
</div>
<p>Mask svg (before inlining)</p>
<svg width="160" height="90" style="border:1px solid #ccc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900">
<path fill="#000" transform="translate(450 100) scale(1.5)" d="M 264 96 L 264 96 C 227 34 146 12 83 49 C 19 86 -2 168 36 232 L 143 417 c 14 24 45 32 69 18 l 184 -107 c 64 -37 86 -120 49 -184 C 409 81 328 59 264 96 z" />
</svg>你可以使用Yoksel 的 svg URL 編碼器來完成這個任務。
您的背景藝術品也可以用作靜態<img>或background-image類似的：
<img src="heart-bg.svg">
.example-video {
background-image:url(heart-bg.svg);
background-size: cover;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441119.html
標籤：javascript html css svg 面具