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

Can't change SVG rect properties in three containers

本文关键字：SVG 属性 三个      更新时间：2023-09-26

经过几次尝试和代码更改，我无法在 SVG 中制作矩形来更改他的位置 - 甚至不要求动画。显然使用jQuery SVG插件和动画扩展。

问题：一个 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>，但我不知道结果是什么。

找出

问题所在：

var rect = jQuery('a.post-image').children('svg').find('.b2, .b3');
jQuery(rect).each(function(){
    jQuery(this).attr('y','-25');
});

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

相关文章：