SVG <clipPath>适合容器并使用%单位

Question

所以我一直试图为一些不同颜色的文本制作挥动动画,因为我正在使用<clipPath>和-webkit-clip-path.在.holderdiv包含在灰色彼此具有相同的文字,在一个白色,一个的顶部的两个元素,并且clip-path被施加到后面.

问题是我需要<path>坐标与文本的大小成比例.这是一个小提琴演示.

• 我试过设置一个viewBox="0 0 100 100",它不起作用.

• 我也试过使用,clipPathUnits="objectBoundingBox"但它似乎在这种情况下不起作用,我猜是因为文本是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