Quote:
Originally Posted by rightawn
I need to find a way to display the audio box over the image within the SVG viewbox.
|
You need to use the tag <foreignObject> inside the svg wrapper. I'll give you an example by taking the code you posted:
Code:
<body>
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1020 760" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject x="0" y="0" width="1020" height="60">
<div xmlns="http://www.w3.org/1999/xhtml">
<audio controls="controls" src="../Audio/etude6.mp3"/>
</div>
</foreignObject>
<image x="0" y="70" width="1020" height="660" xlink:href="../Images/painting6.png"/>
</svg>
</div>
</body>
As you can see, the original viewport must be enlarged in order to contain both, the audio control and image. And now that you have inside the svg wrapper not only the image but a new element, you also need to position both of them. You can watch that the audio control is positioned in x="0" and y="0" with a width of 1020 (the width of the image, but you can change that if you wish) and a height of 60px (give it the height you want), while the image now is positioned in x="0" and y="70" (that is because the height of the audio control is 60, so there is a space of 10px between both elements). Also, the audio control (in fact, any element situated by the tag foreignObject) must be enclose inside a <div> with the declaration
xmlns="http://www.w3.org/1999/xhtml". This is mandatory, otherwise the audio control won't work.
Well, that's all. I hope the code above can help you.