Question

所以我一直在尝试创建和SVG Text Logo，在字母中显示“嵌入式”mpg4。起初我使用了Adobe Illustrator并创建了我的徽标的SVG，而这在我的页面上给了我一个很好的100％宽度响应徽标，我无法以任何方式在SVG中包含视频元素。

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

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

当我编辑CSS类font:的{{1}}时，我可以获得更大的文本，但SVG本身有一个固定的宽度，可以切断大屏幕设备上的文本，我无法理解。我不认为它与视频的自然宽度和高度有关。

当我将浏览器更改为大型桌面大小时，会切断正确大小的文本：

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

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

我实际上认为我不需要更改两个viewbox元素的viewbox属性中的值。也许是因为em计算导致与SVG 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;
    }

Answer 1

确定文字的大小。如果它是500x100，那么制作你的viewBox：

viewBox="0 0 500 100"

我不确定您为什么要将文字放在x="50%" y="50%"。这似乎有点奇怪。文本元素中的x和y坐标设置基线开始的位置。同样，如果你的文字是100高，那么你可能想要将坐标设置为接近：

x="0" y="100"

Answer 2

我使用＆＃39; rem＆＃39;对于字体大小，在父元素上设置。

带有HTML5视频文本填充的SVG

2 个答案: