仅 SVG attr( y ) 不能立即工作答案

【问题标题】：SVG only attr( y ) does not work immediately仅 SVG attr( y ) 不能立即工作
【发布时间】：2020-06-18 06:17:24
【问题描述】：

大项目，一切正常。通过更改 .attr( y )，鼠标点击栏（见图）应该得到不同的顺序。

$( canvas ).find( 'rect.bear.'+cur )
        .css( 'fill', bearkleur )
        .attr( 'y', 0 )
        .attr( "x", midden - bearbreedte )
        .attr( "width", bearbreedte )
        .attr( "height", hoogte-2 )
        .css( "opacity", opa );

现在，最奇怪的是，只有 .attr( y ) 不能立即工作。在几秒钟后触发的另一个动作之后，事情会按照它们应该通过相同的代码进行安排。

所以，首先 .attr( y ) 不起作用，然后它起作用。所有其他属性和 css 都在 svg 对象上正确更新。

任何关于如何和为什么这是可能的以及如何在没有奇怪的解决方法的情况下解决这个问题的想法？

谢谢。

编辑：当我对 .attr(y) 使用 animate() 时，y 位置确实发生了变化。比萨。

【问题讨论】：

你能附上svg代码吗？

标签： javascript jquery html css svg

【解决方案1】：

如果没有其他代码，就很难判断问题出在哪里。如果您运行下面的 sn-p，然后单击矩形，您会看到它工作正常。我确实合并了您对 .attr 的调用并删除了 .css 调用。

var bearkleur = "blue";
var midden = 100;
var bearbreedte = 75;
var hoogte = 8;
var opa = 0.5;
var canvas = $('svg');



$(".bear").click(function() {
  $(canvas).find('rect.bear')
    .attr({
      y: 0,
      x: midden - bearbreedte,
      width: bearbreedte,
      height: hoogte - 2,
      opacity: opa,
      fill: bearkleur,
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="200" height="100" viewBox="0 0 200 100">
  <rect class="bear" x="0" y="50" width="50" height="10" fill="red" />
</svg>

【讨论】：

【解决方案2】：

谢谢特德。事实上，问题不可能出在 Y-attr 本身。一切正常，这一定很奇怪。

我发现 Y 属性也是代码中其他地方的早期动画的唯一属性。撕掉动画，上面的问题就解决了。

错误出现在应用的动画函数中。从未正确终止，因此 Y-attr 处于“中间”。

问题解决了。

【讨论】：