SVG 配合容器中，并使用％单元 SVG 配合容器中，并使用％单元(SVG 2019-05-12 10:02发布 站内文章 / 前沿技术 48 0 0

所以，我一直试图做一个挥手动画以不同的颜色一些文字，对于我使用<clipPath>和-webkit-clip-path 。 所述.holder div包含在灰色彼此具有相同的文字，在一个白色，一个的顶部的两个元素，并且clip-path被施加到后面。

问题是我需要的<path>坐标正比于文字的大小。 这里是一个小提琴演示 。

• 我试过设置一个viewBox="0 0 100 100" ，这是行不通的。

• 我已经使用也试着clipPathUnits="objectBoundingBox" ，但它似乎doesnt't工作在这种情况下，我猜是因为文本display:inline 。

现在，如果这些似乎过于复杂的分析，并了解基本概念，并愿意做你的方式，去了，我很开放，在这一点上的建议。

另外，我想避免的JavaScript要做到这一点，但如果你有，勇往直前，没有问题:)

这里是原始代码：

HTML

<div class="container">
    <div class="holder">
        <div class="back">Text</div>
        <div class="front">Text</div>
        <svg viewBox="0 0 100 100" preserveAspectRatio="none">
            <clipPath id="path">
                <path fill="transparent" stroke="black" >
                    <animate 
                        attributeName="d" 
                        attributeType="XML" 
                        values="M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 40, 50 50 T 100 50 L 100 100 L 0 100 Z;M 0 50 Q 25 60, 50 50 T 100 50 L 100 100 L 0 100 Z"
                        begin="0s" 
                        dur="1s" 
                        fill="freeze" 
                        repeatCount="indefinite" 
                        direction="alternate" />
                </path>
            </clipPath>
        </svg>
    </div>
</div>

所述<animate>元件简单地在两个路径之间交替，以使“波”的作用。

CSS

.container {
    display:inline-block;
    padding:2.5% 5%;
    background:lightcoral;
}
.holder {
    position:relative;
    text-align:center;
    font:6em impact;
    color:white;
    text-transform:uppercase;
}
.front {
    position:absolute;
    top:0;
    color:gray;
    opacity:.3;
    -webkit-clip-path:url(#path);
}
svg {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

这是我的CSS，而不是近乎完美，随意撕碎了！

提前致谢！

Answer 1:

您将有更好的运气，我相信，如果您打开clipPath使用包围盒单位：

<clipPath clipPathUnits="objectBoundingBox" ... >

然后，所有的素材路径坐标应在范围0..1定义。

http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath

文章来源: SVG fit container and use % unit