SVG与HTML5视频文本填充

Question

所以我一直在尝试创建和SVG文本标志，显示一个“嵌入”mpg4的字母。起初，我使用Adobe Illustrator并创建了我的徽标和SVG，虽然这给了我一个伟大的100%宽度响应的徽标在我的页面，但我不能在SVG中以任何方式包含视频元素。

现在我得到了一个Didot web字体，并且只是使用一个文本SVG，我从这个演示中复制并粘贴了F12工具的代码:http://tympanus.net/tutorials/animatedtextfills/index22.html

我现在想要做的是如何使这个徽标更大和100%的宽度响应屏幕宽度的变化。

当我编辑CSS类.wrap的font:时，我可以得到更大的文本，但SVG本身有一个固定的宽度，会切断大屏幕设备上的文本，我无法计算出来。我不认为这与视频的自然宽度和高度有关。

我正在更改SVGviewbox属性的值，但似乎无法概念化viewboxwidth=600和height=300的性质，尤其是在父SVG中有一个嵌套SVG的情况下。

即使在阅读了这篇文章:http://tutorials.jenkov.com/svg/svg-viewport-view-box.html#viewbox，我仍然难以理解viewbox值是否在我的问题中发挥了作用。

实际上我认为不需要更改两个svg元素的viewbox属性中的值。可能是em计算导致了与SVGtext元素计算有关的问题：

 <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text">
                        Couture Book
                    </text>

.mask__shape
    {
        fill: white;
    }

   
    .content
    {
        padding: 0 1em;
        text-align: center;
        width: 100%;
    }

    .wrap
    {
        width: 100%;
        position: relative;
        font: 700 2.5em/1 'Dido';
        text-transform: uppercase;
        margin: 0 auto;
        text-align: left;
        overflow: hidden;
        padding: 80px 0;
        -webkit-transform: translate3d(0,0,0);
    }

    .box-with-text
    {
        position: absolute;
        top: 50%;
        width: 100%;
        padding-top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .text-fill
    {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        overflow: hidden;
    }

    svg:not(:root)
    {
        overflow: hidden;
    }

    .svg-defs
    {
        width: 0;
        height: 0;
    }

    .svg-inverted-mask
    {
        position: absolute;
        top: 0;
    }

    .shape--fill
    {
        fill: #fff;
    }

    .text--transparent
    {
        fill: transparent;
    }

<div class="content">
        <div class="wrap">
            <svg viewBox="0 0 600 300" class="svg-defs">

                <!-- Symbol with text -->
                <symbol id="s-text">
                    <text text-anchor="middle" x="50%" y="50%" dy=".35em" class="text">
                            Couture Book
                        </text>
                </symbol>

                <!-- Mask with text -->
                <mask id="m-text" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">

                    <rect width="100%" height="100%" class="mask__shape">
                    </rect>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="mask__text"></use>

                </mask>
            </svg>

            <div class="box-with-text">

                <!-- Container for video -->
                <div class="text-fill">
                    <video class="video" src="http://tympanus.net/Tutorials/AnimatedTextFills/img/bokeh2.mp4" autoplay="" loop=""></video>
                </div>

                <!-- Visible SVG -->
                <svg viewBox="0 0 600 300" class="svg-inverted-mask">
                    <rect width="100%" height="100%" mask="url(#m-text)" class="shape--fill"></rect>
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text--transparent"></use>
                </svg>
            </div>
        </div>
    </div>

Answer 1

计算出你的文本有多大。如果是500x100，那么制作您的ViewBox：

viewBox="0 0 500 100"

我不知道为什么您将文本定位在x=“50%”y=“50%”。这似乎有点奇怪。在文本元素中，x和y坐标设置基线起始的位置。同样，如果您的文本是100高，那么您可能希望将坐标设置为接近于：

x="0" y="100"