SVG< clipPath>适合容器并使用％单位 [英] SVG <clipPath> fit container and use % unit

问题描述

所以我一直在尝试为一些不同颜色的文本制作动画动画，因为我使用< clipPath> 和 -webkit形夹路径。 .holder div包含两个相同的文本元素，一个白色，一个灰色，剪辑路径应用于后者。

问题是我需要< path> 坐标与文本大小成正比。这是

So I've been trying to make a waving animation for some text in a different color, for that I'm using <clipPath> and -webkit-clip-path. The .holder div contains two elements on top of one another with the same text, one in white, one in grey, and the clip-path is applied to the later.

The problem is that I need the <path> coordinates to be proportional to the text's size. Here is a fiddle demo.

• I've tried setting a viewBox="0 0 100 100", it doesn't work.

• I've also tried using clipPathUnits="objectBoundingBox" but it doesnt't seem to work in this case, I'm guessing because the text is display:inline.

Now if these seems too complicated to analyze, and you understand the basic concept and are willing to do it your way, go for it, I'm so open to suggestions at this point.

Also, I'm trying to avoid JavaScript to do this, but if you have to, go ahead, no problem :)

Here is the raw code:

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>

The <animate> element simply alternates between the two paths, to make the "wave" effect.

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;
}

This is my css, not nearly perfect, feel free to rip it apart!

Thanks in advance!

解决方案

You will have better luck, I believe, if you switch your clipPath to using bounding box units:

<clipPath clipPathUnits="objectBoundingBox" ... >

Then all your path coordinates should be defined in the range 0..1.

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

这篇关于SVG< clipPath>适合容器并使用％单位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！