Jquery SVG CSS3动画坐标小故障
我在这里创建了一个示例： 您可以使用“打开屏障”打开屏障，然后使用“关闭屏障”按钮关闭屏障。一切都很好 它仅更改以下类别：Jquery SVG CSS3动画坐标小故障,jquery,css,svg,Jquery,Css,Svg,我在这里创建了一个示例： 您可以使用“打开屏障”打开屏障，然后使用“关闭屏障”按钮关闭屏障。一切都很好 它仅更改以下类别： .barrierOpen{ transform: matrix(0.1,0,0,1,-7,0); } .barrierClosed{ transform: matrix(1,0,0,1,0,0); } 但是如果你打开障碍物，然后使用“切换可见性”按钮（两次，一次隐藏，一次再次显示），障碍物的位置不正确。如果你尝试关闭它们，它会再次被修复 有人能解释一下
.barrierOpen{
transform: matrix(0.1,0,0,1,-7,0);
}
.barrierClosed{
transform: matrix(1,0,0,1,0,0);
}
有人能解释一下吗？我认为这是SVG与CSS的斗争，但是有什么好的解决方案吗？所以问题出在SVG代码中。看起来有必要使用组和转换属性来定位元素，然后它可以在所有浏览器上正确工作 因此，根据屏障规范：
<g id="barrierWrapper-40300"
transform="translate(21.399381,0)">
<g>
<!-- selection -->
<rect stroke="transparent" x="353" y="354.8" fill="transparent" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="barrier-40300" height="41.2" width="75" style="transform-origin: center;" />
</g>
<g id="barrierOpacity-40300">
<g>
<!-- diag state -->
<rect stroke="#92d050" fill="#92d050" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="18.883333" width="20.6" id="barrierDiagState-40300" y="366.816667" x="358.15"/>
</g>
<g>
<!-- inner gray part -->
<rect stroke="#000000" fill="#737373" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="15.45" width="17.166667" y="368.533333" x="359.866667"/>
</g>
<g id="barrierPole-40300" style="transform-origin: top left;transition: all 4.5s linear;">
<!-- actual barrier -->
<rect stroke="#000000" fill="#ffffff" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="5.15" width="40" y="373.683333" x="377.033333"/>
<rect fill="#ff0000" height="5.15" width="13.733333" y="373.683333" x="390.766667"/>
</g>
<g>
<text transform="matrix(0.34333333373069763,0,0,0.34333333373069763,141.8399999141693,298.7833331525326) " font-size="32px" fill="#000" font-family="Arial" id="barrierLabel-40300" y="191.15534" x="635.029126">A4</text>
<image id="barrierErrorIcon-40300" width="4.806667" height="4.806667" y="358.95" x="378.166667" visibility="hidden" xlink:href="/images/error-bitmap.png"/>
</g>
</g>
</g>
A4
<g transform="translate(381 368)" id="barrierWrapper-40300">
<g transform="translate(-10,-11)">
<!-- selection -->
<rect stroke="transparent" x="0" y="0" fill="transparent" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="barrier-40300" height="40" width="80" style="transform-origin: 6px 23px;" />
</g>
<g id="barrierOpacity-40300">
<g>
<!-- diag state -->
<rect stroke="#92d050" fill="#92d050" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="19" width="20" id="barrierDiagState-40300" y="0" x="0"/>
</g>
<g>
<!-- inner gray part -->
<rect stroke="#000000" fill="#737373" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="15" width="16" y="2" x="2"/>
</g>
<g transform="translate(15,0)">
<g id="barrierPole-40300" style="transform-origin: top left;transition: all 4.5s linear;">
<!-- actual barrier -->
<rect stroke="#000000" fill="#ffffff" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="5" width="40" y="7" x="3"/>
<rect fill="#ff0000" height="5" width="13" y="7" x="16"/>
</g>
</g>
<g>
<text font-size="12px" fill="#000" font-family="Arial" id="barrierLabel-40300" y="0" x="0" >A4</text>
<image id="barrierErrorIcon-40300" width="5" height="5" y="0" x="0" transform="matrix(1,0,0,1,-6,-7)" visibility="hidden" href="images/error-bitmap.png"/>
</g>
</g>
</g>
A4
这样就行了。请注意，rect元素的x和y属性现在只是一个小数字，所有主要的定位都是通过translate和groups完成的。所以问题出在SVG代码中。看起来有必要使用组和转换属性来定位元素，然后它可以在所有浏览器上正确工作 因此，根据屏障规范：
<g id="barrierWrapper-40300"
transform="translate(21.399381,0)">
<g>
<!-- selection -->
<rect stroke="transparent" x="353" y="354.8" fill="transparent" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="barrier-40300" height="41.2" width="75" style="transform-origin: center;" />
</g>
<g id="barrierOpacity-40300">
<g>
<!-- diag state -->
<rect stroke="#92d050" fill="#92d050" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="18.883333" width="20.6" id="barrierDiagState-40300" y="366.816667" x="358.15"/>
</g>
<g>
<!-- inner gray part -->
<rect stroke="#000000" fill="#737373" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="15.45" width="17.166667" y="368.533333" x="359.866667"/>
</g>
<g id="barrierPole-40300" style="transform-origin: top left;transition: all 4.5s linear;">
<!-- actual barrier -->
<rect stroke="#000000" fill="#ffffff" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="5.15" width="40" y="373.683333" x="377.033333"/>
<rect fill="#ff0000" height="5.15" width="13.733333" y="373.683333" x="390.766667"/>
</g>
<g>
<text transform="matrix(0.34333333373069763,0,0,0.34333333373069763,141.8399999141693,298.7833331525326) " font-size="32px" fill="#000" font-family="Arial" id="barrierLabel-40300" y="191.15534" x="635.029126">A4</text>
<image id="barrierErrorIcon-40300" width="4.806667" height="4.806667" y="358.95" x="378.166667" visibility="hidden" xlink:href="/images/error-bitmap.png"/>
</g>
</g>
</g>
A4
<g transform="translate(381 368)" id="barrierWrapper-40300">
<g transform="translate(-10,-11)">
<!-- selection -->
<rect stroke="transparent" x="0" y="0" fill="transparent" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="barrier-40300" height="40" width="80" style="transform-origin: 6px 23px;" />
</g>
<g id="barrierOpacity-40300">
<g>
<!-- diag state -->
<rect stroke="#92d050" fill="#92d050" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="19" width="20" id="barrierDiagState-40300" y="0" x="0"/>
</g>
<g>
<!-- inner gray part -->
<rect stroke="#000000" fill="#737373" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="15" width="16" y="2" x="2"/>
</g>
<g transform="translate(15,0)">
<g id="barrierPole-40300" style="transform-origin: top left;transition: all 4.5s linear;">
<!-- actual barrier -->
<rect stroke="#000000" fill="#ffffff" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round" height="5" width="40" y="7" x="3"/>
<rect fill="#ff0000" height="5" width="13" y="7" x="16"/>
</g>
</g>
<g>
<text font-size="12px" fill="#000" font-family="Arial" id="barrierLabel-40300" y="0" x="0" >A4</text>
<image id="barrierErrorIcon-40300" width="5" height="5" y="0" x="0" transform="matrix(1,0,0,1,-6,-7)" visibility="hidden" href="images/error-bitmap.png"/>
</g>
</g>
</g>
A4
这样就行了。请注意，rect元素的x和y属性现在只是一个小数字，所有主要位置都是通过translate和groups完成的。您使用的是哪种浏览器？我使用的是稍旧的Chrome版本，看起来不错。Windows上最新的Chrome看起来不错。Firefox动画因知道转换问题而退出。IE11有缺陷（svg太小，关闭不起作用）我正在使用Chrome（我希望是最新的），我在我的应用程序中使用了大约半年，所以它与任何新版本都没有关系。我现在在Firefox中查看了它，我发现它确实工作得很糟糕。我有一个丑陋的黑客，每次svg被隐藏和再次显示时，都会删除该类并再次添加它，以修复打开的屏障位置。android平板电脑上的Chrome浏览器与桌面上的相同。您使用哪种浏览器？我使用的是稍旧的Chrome版本，看起来不错。Windows上最新的Chrome看起来不错。Firefox动画因知道转换问题而退出。IE11有缺陷（svg太小，关闭不起作用）我正在使用Chrome（我希望是最新的），我在我的应用程序中使用了大约半年，所以它与任何新版本都没有关系。我现在在Firefox中查看了它，我发现它确实工作得很糟糕。我有一个丑陋的黑客，每次svg被隐藏和再次显示时，都会删除该类并再次添加它，以修复打开的屏障位置。android平板电脑上的Chrome与桌面上的相同。