親SVG内のSVG画像のセンタリング

次のコードを使用してHTML/CSS/Javascriptでプレゼンテーションを準備しています。私が望むのは、SVGイメージをメインSVGの中心に置くことです。私が理解していることから、メインSVGのviewBoxは新しい座標系を確立します。だから、画像の幅の半分（ "text-anchor =" middle ""に似ています）を使って画像を中央に置くと、私は期待したものが得られず、画像はシフトされていますが、親SVG内のSVG画像のセンタリング

<!doctype html> 
<meta charset="utf-8"> 

<script src="./js/d3.js"></script> 

<style> 

body { 
    margin:0; 
    /*border: 5px solid green; /*for testing*/ 
    display:block; 
    padding-top: 0px; 
    height: 100vh; 
    background-color: rgba(0,0,0,1); 
    font-family: Helvetica; 
} 

body svg { 
    /*border: 1px solid #C1543D;*/ /*for testing*/ 
    display:block; 
    margin: auto; 
} 

.slideBackground { 
    fill: white; 
} 

.slideHeader{ 
    font-size: 38; 
} 

</style> 



<body> 


    <svg width="100%" height="100%" viewBox="0 0 1024 768"> <!-- 1024 and 768 are expressed in units of the SVG's viewport (NOT pixels)--> 

    <rect class="slideBackground" x="0%" y="0%" width="100%" height="100%"/> <!-- rect for viewbox--> 

    <g id="equation"> 
     <svg x="50%" y="70%" width="30%" height="6%" viewBox="0 0 35 5" preserveAspectRatio="xMidYMid"> 
     <image x="0" y="0" width="100%" height="100%" xlink:href="bayesTheorem.svg"></image> 
     </svg> 
    </g> 

    </svg> 

</body> 

<script> 

var eqSVG = document.getElementById("equation"); 
var rec = eqSVG.getBoundingClientRect().width; 

d3.select("#equation").attr("transform", "translate(" + (-rec/2) + ",0)") 

</script>

出典

2016-10-12 spyrostheodoridis

なぜスクリプトを使用するのですか？ –

インタラクティブ性と楽しみのために！ – spyrostheodoridis

どのような星（*）がありますか？ –