0

何度か試行し、コードを変更した後、SVG内に長方形を作成して位置を変更することはできません。アニメーション化を要求することすらしないでください。明らかに、jQuerySVGプラグインとアニメーション拡張機能を使用しています。

問題：3つの内側にラップされたSVG 、内側のyには長方形があり、ドキュメントの読み込み後に<div>配置する必要があります。y:0そしてこれはコードです：

var rect = jQuery('div.post-image').children('svg').svg().svg('get');

jQuery(rect).each(function(){
    jQuery(this).change('.b1', {y:0});
});

まあ、長方形には何も起こりません、それは元の座標を保持します。Chromeコンソールも何も言いません。

追加：問題のHTML

<a href="#" class="post-image" title="title">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="140" viewBox="0,0,250,140" overflow="hidden">
    <switch>
    <g>
        <defs>
            <filter id="innershadow">
                <feOffset dx="0" dy="0"></feOffset>
                <feGaussianBlur stdDeviation="7" result="offset-blur"></feGaussianBlur>
                <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></feComposite>
                <feFlood flood-color="#000" flood-opacity="0.3" result="color"></feFlood>
                <feComposite operator="in" in="color" in2="inverse" result="shadow"></feComposite>
                <feComposite operator="over" in="shadow" in2="SourceGraphic"></feComposite>
            </filter>
            <pattern xmlns="http://www.w3.org/2000/svg" id="image-771" patternUnits="userSpaceOnUse" width="250" height="202">
                <image href="example-310x250.jpg" xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="250" height="202"></image>
            </pattern>
            <clipPath id="clip">
                <polygon points="0,0 235,0 250,70 235,140 0,140 15,70"></polygon>
            </clipPath>
        </defs>
        <polygon points="0,0 235,0 250,70 235,140 0,140 15,70" style="fill: url(#image-771); filter:url(#innershadow);"></polygon>
        <rect class="b1" width="100%" height="100%" style="fill:rgb(0,92,148); opacity: 0.9;" clip-path="url(#clip)" x="0" y="98"></rect>
        <rect class="b2" width="60" height="25" style="fill:rgb(0,92,148); opacity: 0.9;" clip-path="url(#clip)" x="190" y="0"></rect>
        <rect class="b3" width="100" height="25" style="fill:rgb(0,0,0); opacity: 0.75;" clip-path="url(#clip)" x="0" y="0"></rect>
    </g>
    <foreignObject width="250" height="140">
        <img width="250" height="125" src="example-fallback.jpg" alt="example" title="title">       </foreignObject>
    </switch>
    </svg>  
</a>

私は<canvas>これに喜んで使用しますが、結果はわかりません。

4

1 に答える 1

2

問題が何であったかを調べます。

var rect = jQuery('a.post-image').children('svg').find('.b2, .b3');

jQuery(rect).each(function(){
    jQuery(this).attr('y','-25');
});

完了、プラグインなし。わかりました、最善の方法ではありません（ほとんどの直接セレクターの代わりに検索してください）が、それはそれをカットします。

于 2012-06-20T01:54:25.053 に答える