SVG <clipPath> fit container and use % unit

问题

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!

回答1:

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

<clipPath clipPathUnits="objectBoundingBox" ... >

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

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

来源：https://stackoverflow.com/questions/28788082/svg-clippath-fit-container-and-use-unit