无法更改三个容器中的 SVG 矩形属性答案

【问题标题】：Can't change SVG rect properties in three containers无法更改三个容器中的 SVG 矩形属性
【发布时间】：2012-06-22 02:41:50
【问题描述】：

经过几次尝试和代码更改，我无法在 SVG 内制作矩形来改变他的位置 - 甚至不要求动画。明明用jQuery SVG plugin加动画扩展。

问题：一个 SVG 包裹在三个 <div> 内，一个 y 内部有一个矩形，在文档加载后需要位于 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>，但我不知道结果如何。

【问题讨论】：

标签： javascript jquery html svg jquery-svg

【解决方案1】：

找出问题所在：

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

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

完成，并且没有插件。好吧，不是最好的方法（找到而不是最直接的选择器），但它会削减它。

【讨论】：