Question

问题

我尝试使用transform=matrix(a,b,c,d,e,f)

简单地移动svg元素

元素移动正常但是当我应用css转换时它没有效果。

问题

对于没有像d3这样的外部库的svg元素，这是否可行？

代码我正在尝试

HTML：

<svg width="100%" height="100%" viewbox="0 0 200 200">
    <rect x="20" y="20" width="50" height="50"
      style="fill: #3333cc"
      transform="matrix(1,0,0,1,1,1)"
      id="blueBox"
        />    
</svg>
<button id="boxMover">
    Move it
</button>

的jQuery

$(function(){
    $('#boxMover').click(function(){
  var blueBox = $('#blueBox');
    if(blueBox.attr('transform')=='matrix(1,0,0,1,1,1)'){
        blueBox.attr('transform', 'matrix(1,0,0,1,100,30)');
    } else {
        blueBox.attr('transform', 'matrix(1,0,0,1,1,1)');
    }
  })
})

CSS

svg {
  display: block
}
#boxMover {
  position: absolute;
  left: 20px;
  top: 20px;
  transition: transform .5s ease;
}

Here's a fiddle I created to test it

Answer 1

CSS和SVG名称空间之间存在一个可怕的灰色区域，这样的事情一直都会发生。

但是，您可以按如下方式解决问题：

将transform CSS语句移出#boxMover规则并将其置于可能实际影响#blueBox SVG元素行为的位置。
直接更改SVG元素的transform属性仍然无法正常工作，因为您正在与SVG名称空间进行通信，并且CSS规则没有任何发言权在这个问题上。而是设置包含所需转换属性的CSS类，并在它们之间切换。 SVG命名空间中没有class属性，因此CSS规则将变为现实。
另请注意you can't use JQuery's addClass() and removeClass() methods to change the class of an SVG element，因此请改用attr('class')

这应该有效：

＆＃13;

$(function() {
  $('#boxMover').click(function() {
    var blueBox = $('#blueBox');
    if (blueBox.attr('class') == 'overHere') {
      blueBox.attr('class', 'overThere');
    } else {
      blueBox.attr('class', 'overHere');
    }
  })
})

＆＃13;

svg {
  display: block
}
#boxMover {
  position: absolute;
  left: 20px;
  top: 20px;
}
#blueBox {
  transition: transform .5s ease;
}
.overHere {
  transform: matrix(1, 0, 0, 1, 1, 1);
}
.overThere {
  transform: matrix(1, 0, 0, 1, 100, 30);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="100%" height="100%" viewbox="0 0 200 200">
  <rect x="20" y="20" width="50" height="50"
        style="fill: #3333cc" class="overHere" id="blueBox" />
</svg>
<button id="boxMover">
  Move it
</button>

＆＃13;

Answer 2

更简单的解决方案：

创建以下类：

.boxEase { transform: matrix(1,0,0,1,100,30); transition: all .5s ease; }
更改您的jQuery代码，只需在单击按钮时将上述类附加到您的框中：

$(function(){ $('#boxMover').click(function(){ var blueBox = $('#blueBox'); blueBox.attr('class', 'boxEase'); }) })

添加了具有变量结束（起始）位置的动态案例

使用以下jQuery代码，其中有条件地将转换和转换属性添加到框中。我想你可以将条件调整为其他东西，但我在这种情况下使用了你原来的例子：

`$(function(){
   $('#boxMover').click(function(){
     var startPos = 'matrix(1,0,0,1,1,1)',
         endPos = 'matrix(1,0,0,1,100,30)';

     var blueBox = $('#blueBox');
     if(blueBox.attr('transform') == startPos){
       blueBox.attr('transform', endPos);
       blueBox.css({'transform': endPos, 'transition': 'all 0.5s ease'});
     } else {
     blueBox.attr('transform', startPos);
     blueBox.css({'transform': startPos, 'transition': 'all 0.5s ease'});
     }
   })
}); `

用css转换svg元素

2 个答案: