带有 HTML5 视频文本填充的 SVG

Question

所以我一直在尝试创建一个 SVG 文本徽标，它在字母中显示“嵌入式”mpg4。起初我使用 Adob​​e Illustrator 并创建了我的徽标 SVG，虽然这给了我一个很棒的 100% 宽度响应徽标在我的页面上，但我无法以任何方式在 SVG 中包含视频元素。

所以现在我得到了一个 Didot 网络字体并且只使用文本 SVG，我从这个演示的 F12 工具中复制并粘贴了代码：http://tympanus.net/Tutorials/AnimatedTextFills/index22.html

我现在要做的是弄清楚如何使这个徽标更大，并且 100% 宽度响应屏幕宽度的变化。

当我编辑 CSS 类 .wrap 的 font: 时，我可以获得更大的文本，但 SVG 本身有一个固定宽度，它会在大屏幕设备上截断文本，我无法弄清楚。我认为这与视频的自然宽度和高度无关。

当我将浏览器更改为较大的桌面尺寸时，会发生正确尺寸的文本被截断：

我一直在更改 SVG viewbox 属性的值，但我似乎无法概念化 viewbox width=600 和 height=300 的性质，尤其是在父级中有嵌套 SVG 的事实SVG。

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

我实际上认为我不需要更改两个SVG 元素的viewbox 属性中的值。也许是 em 计算导致了与 SVG text 元素计算相关的问题：

 <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"

Answer 2

我使用 'rem' 作为字体大小来实现这一点，在父元素上设置。