4

HTML5 ビデオの上に図形を描画しようとしていますが、その方法がわかりません。ビデオの上にマスクを適用する方法を知っています：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>SVG Test</title>
    </head>
    <body>
        <video class="target1" height="270px" width="480px" controls >
            <source src="testVideo.webm" type="video/webm" />
        </video>

        <!-- Apply a mask to the video -->
        <style>
            .target1 { mask: url("#mask1"); }
        </style>

        <!-- Define the mask with SVG -->
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                width="480px" height="270px">
            <defs>
                <mask id="mask1" maskUnits="objectBoundingBox" 
                        maskContentUnits="objectBoundingBox">
                    <circle cx="0.25" cy="0.25" r="0.5" fill="white" />
                </mask>
            </defs>
        </svg>
    </body>
</html>

しかし、ビデオの上にポリラインを描画するにはどうすればよいでしょうか?

<polyline id="line" points="0,0 25,25, 25,50 75,50 100,100, 125,125"
     style="fill:none;stroke:orange;stroke-width:3" />

次のように、ページの他の場所に線を引くことができます。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>SVG Test</title>
    </head>
    <body>
        <video class="target1" height="270px" width="480px" controls >
            <source src="testVideo.webm" type="video/webm" />
        </video>

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1200px" height="700px">
            <polyline id="line" points="0,0 25,25, 25,50 75,50 100,100, 125,125"
                style="fill:none;stroke:orange;stroke-width:3" />
        </svg>
    </body>
</html>

しかし、ビデオの上に線を引く方法がわかりません。どんな助けでも大歓迎です！

4

2 に答える 2

3

はい、css ソリューションは 1 つのオプションです。上記の 2 つの要素を 1 つの div または (jörn が指摘したように) 絶対配置で配置するようにしてください。z-index は、svg が本当に一番上にあることを確認するために非常に便利です。

<div id="canvas">
    <video id="videoContainer"> (...) </video>

    <svg id="svgContainer"> (...) </svg>
</div>


<style> 
   canvas{ position:relative; width:480px; height:240px; }
   videoContainer{ position:relative; width:100%; height:100%; z-index:1 }
   svgContainer{ position:relative; width:100%; height:100%; z-index:2 }
</style>
于 2012-04-12T12:59:57.210 に答える
1

CSS position:absolute を使用して、SVG を必要な場所に配置します。

<style> svg { position:absolute; top:20px; left:40px; }</style>

上記の例では、svg をページの上から 20 ピクセル、左から 40 ピクセルに配置する必要があります。

于 2012-04-12T09:04:26.350 に答える