如何移动 SVG 剪辑中的形状

Question

我猜我正在尝试做一些不可能的事情，所以这就是我想做的原因： http://codepen.io/anon/pen/doZpRJ

所以我测试了多种方法来尝试做到这一点，比如创建一个高度为 0 的剪辑形状。但问题是我想让它从底部出现。我的第一次尝试是创建一个剪辑形状并将 "SHA" 从剪辑形状外部转换到内部。但这不起作用，没有 "overflow: hidden" 效果

这是我的代码

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="180px" height="180px" viewBox="0 0 180 180" style="enable-background:new 0 0 180 180;" xml:space="preserve">
<defs>
    <clipPath id="clip-shape">
        <rect x="10" y="20" width="100" height="50" />
    </clipPath>
</defs>
<g>
    <path id="sha-shape" style="fill:#FF0000; clip-path: url(#clip-shape);" d="M137.48,44.615c-3.143,0-5.719,2.533-5.719,5.721c0,1.97,1.031,3.658,2.531,4.69l-0.609,1.267
    c-0.234,0.469-0.33,0.938-0.33,1.454c0,1.594,1.361,3.235,3.238,3.235c1.219,0,2.344-0.703,2.906-1.829l3.096-6.378
    c0.375-0.703,0.607-1.595,0.607-2.438C143.201,47.148,140.576,44.615,137.48,44.615 M123.977,50.666l-1.172-2.486
    c-1.08-2.298-3.189-3.611-5.441-3.611c-2.344,0-4.033,1.36-4.922,3.142l-10.693,21.807c-0.422,0.844-0.609,1.829-0.609,2.72
    c0,2.908,2.156,5.768,5.486,5.768c2.203,0,4.361-1.36,5.486-3.611L123.977,50.666z M133.59,72.237c0-0.892-0.236-1.829-0.656-2.72
    L124.82,52.4l-9.848,19.837h6.613l1.031,2.157c1.078,2.25,3.281,3.611,5.486,3.611c3.328,0,5.439-2.86,5.439-5.768H133.59z
     M80.083,72.284V50.29c0-3.142-2.577-5.721-5.72-5.721c-3.143,0-5.674,2.58-5.674,5.721v21.994c0,3.189,2.532,5.721,5.674,5.721
    C77.505,78.005,80.083,75.473,80.083,72.284 M98.325,72.284V50.29c0-3.142-2.532-5.721-5.72-5.721c-3.143,0-5.675,2.58-5.675,5.721
    v5.673h-5.159V66.61h5.159v5.674c0,3.189,2.532,5.721,5.675,5.721C95.793,78.005,98.325,75.473,98.325,72.284 M53.025,67.782
    l-5.909-2.485c-0.468-0.188-0.938-0.33-1.453-0.33c-2.297,0-3.846,2.159-3.846,4.361c0,5.348,6.519,8.583,11.208,8.676V67.782z
     M53.025,64.874V44.569c-5.674,0-10.55,4.409-10.55,10.316c0,3.283,1.359,6.19,4.547,7.503L53.025,64.874z M54.714,78.005
    c6.283-0.188,11.067-4.455,11.067-10.833c0-7.128-4.737-8.722-11.067-11.067V78.005z M54.714,53.432l4.501,1.688
    c0.469,0.141,0.891,0.234,1.407,0.234c2.298,0,3.752-1.688,3.752-3.892c0-4.689-5.816-6.8-9.661-6.894V53.432z"/>
</g>

还有我的小JS

    var shaShape = $('#sha-shape');

TweenLite.set(shaShape, {css: {y: "40px"}});

$('svg').hover(function() {

    TweenLite.to(shaShape, .35, {y: "0px"});

}, function() {

    TweenLite.to(shaShape, .35, {y: "40px"});

});

您可以在此处查看代码 "working" :

http://codepen.io/anon/pen/rVYMRm

干杯，

Answer 1

把剪辑路径放在父组里就行了

<g style="clip-path: url(#clip-shape);">
    <path id="sha-shape" style="fill:#FF0000;" .../>

http://codepen.io/anon/pen/GJONNV

如何移动 SVG 剪辑中的形状

How to move a shape in a SVG clip

javascript

svg

clip

gsap