Question

我在这里创建了一个例子：

您可以使用＆＃34; OPEN BARRIERS＆＃34;打开障碍，那么你可以使用＆＃34; CLOSE BARRIERS＆＃34;按钮关闭障碍。一切都很好。

它只会改变这些类：

.barrierOpen{
    transform: matrix(0.1,0,0,1,-7,0);
}

.barrierClosed{
    transform: matrix(1,0,0,1,0,0);
}

但如果你打开障碍，然后使用＆＃34; TOGGLE VISIBILITY＆＃34;按钮（2次，一次隐藏，一次再显示），障碍位置不正确。如果你然后尝试关闭它们，它们都会再次固定。

任何人都能解释一下吗？我认为它的SVG与CSS协调战斗，但是有什么好的解决方案吗？

Answer 1

所以问题出在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>

我创建了：

<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>

这没关系。请注意，rect元素的x和y属性现在只是小数字，所有主要的positioing都是通过翻译和组完成的。

SVG CSS3动画协调毛刺

1 个答案: