SVG親はアニメーションを出力しますが、子SVGは表示しません

Question

親SVGはなぜ回転しますが、子SVGは回転しませんか？最初のSVGの親要素が第二SVG ChromeとIE 11にしようとしました

の子要素アニメーションではなくなります

注（はい、.parent-svg-1はIE 11に回転）、両方のブラウザでは同じ結果が得られました。 FireFoxでも試しました。.child-svg-2は回転しますが、中心からは回転しません。 SVG 1.1では

$(document).ready(function() { 
 

 
    setInterval(function() { 
 

 
    let wd = 720 - 90 
 
    let min = wd - 32.5 
 
    let max = wd + 32.5 
 
    let num = Math.floor(Math.random() * (max - min + 1) + min) 
 

 
    // Note the parent element of the first SVG will animate, 
 
    // but not the child element of the second SVG 
 
    $('.parent-svg-1, .child-svg-2') 
 
     .stop() 
 
     .animate({ 
 
     rotate: num 
 
     }, { 
 
     step: function(now, fx) { 
 
      $(this).css('transform', 'rotate(' + now + 'deg)') 
 
     }, 
 
     duration: 500 
 
     }, 'linear') 
 
    }, 500) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<svg class="parent-svg-1" viewBox="0 0 60 60" width="50" height="50"> 
 
\t <svg class="child-svg-1"> 
 
\t \t <path d="M 10 30 L 20 20 L 20 25 L 50 25 L 50 35 L 20 35 L 20 40 Z" fill="#55f" /> 
 
\t </svg> 
 
</svg> 
 

 
<svg class="parent-svg-2" viewBox="0 0 60 60" width="50" height="50" x="0" y="110"> 
 
\t <svg class="child-svg-2"> 
 
\t \t <path d="M 10 30 L 20 20 L 20 25 L 50 25 L 50 35 L 20 35 L 20 40 Z" fill="#f00" /> 
 
\t </svg> 
 
</svg>

Answer 1

、transform属性が<svg>要素はサポートされていません。 SVGはHTMLに埋め込まれており、変換はHTMLレイアウトエンジンによって処理されているため、最初のケースで動作します。 SVGレンダリングコードではありません。

まだ実行中のSVG2では、transformはです。 Firefoxはそれを実装しているようだが、Chromeはそうではない。

子供の<svg>要素を<g>に変更するのが簡単です。彼らの両方が、Firefoxの上で私のために回転

$(document).ready(function() { 
 

 
    setInterval(function() { 
 

 
    let wd = 720 - 90 
 
    let min = wd - 32.5 
 
    let max = wd + 32.5 
 
    let num = Math.floor(Math.random() * (max - min + 1) + min) 
 

 
    // Note the parent element of the first SVG will animate, 
 
    // but not the child element of the second SVG 
 
    $('.parent-svg-1, .child-svg-2') 
 
     .stop() 
 
     .animate({ 
 
     rotate: num 
 
     }, { 
 
     step: function(now, fx) { 
 
      $(this).css('transform', 'rotate(' + now + 'deg)') 
 
     }, 
 
     duration: 500 
 
     }, 'linear') 
 
    }, 500) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<svg class="parent-svg-1" viewBox="0 0 60 60" width="50" height="50"> 
 
\t <svg class="child-svg-1"> 
 
\t \t <path d="M 10 30 L 20 20 L 20 25 L 50 25 L 50 35 L 20 35 L 20 40 Z" fill="#55f" /> 
 
\t </svg> 
 
</svg> 
 

 
<svg class="parent-svg-2" viewBox="0 0 60 60" width="50" height="50" x="0" y="110"> 
 
\t <g class="child-svg-2"> 
 
\t \t <path d="M 10 30 L 20 20 L 20 25 L 50 25 L 50 35 L 20 35 L 20 40 Z" fill="#f00" /> 
 
\t </g> 
 
</svg>