我有一个svg，比方说，3个元素。我想将所有这些元素放在svg画布的中心。现在重要的是我使用svg的'viewBox'属性来缩放和平移。
我想使用JavaScript来计算确切位置，然后将元素转换为它们。 我已经尝试过，但无法实现我想要的目标。
小提琴链接是http://jsfiddle.net/FZe7u/
下面是我的代码： -
HTML
<svg version="1.1" id="mainsvg" xmlns="http://www.w3.org/2000/svg" height="729" width="1429" viewBox="596 234 238 121">
<path d="M 0 0 L -0.67 -1.03 -1.38 -2.03 -2.11 -3 -2.9 -3.95 -3.71 -4.86 -4.57 -5.75 -5.45 -6.61 -6.39 -7.42 -7.36 -8.19 -8.37 -8.91 -9.42 -9.58 -10.49 -10.21 -11.62 -10.77 -12.77 -11.26 -13.94 -11.7 -15.14 -12.07 -16.37 -12.37 -17.61 -12.6 -18.86 -12.74 -20.12 -12.82 -21.39 -12.8 -22.65 -12.72 -23.9 -12.55 -25.14 -12.31 -26.36 -11.99 -27.54 -11.59 -28.71 -11.12 -29.85 -10.57 -30.93 -9.95 -31.97 -9.28 -32.97 -8.53 -33.9 -7.73 -34.79 -6.87 -35.61 -5.96 -36.37 -5 -37.08 -4 -37.71 -2.95 -38.28 -1.88 -38.77 -0.77 -39.2 0.36 -39.57 1.51 -39.86 2.68 -40.1 3.86 -40.26 5.05 -40.36 6.25 -40.41 7.45 -40.4 8.66 -40.32 9.86 -40.2 11.05 -40.02 12.24 -39.81 13.43 -39.53 14.6 -39.21 15.77 -38.86 16.92 -38.47 18.06 -38.02 19.2 -37.54 20.3 -37 21.4 -36.43 22.47 -35.81 23.51 -35.17 24.55 -34.5 25.56 -33.79 26.56 -33.06 27.54 -32.3 28.51 -31.53 29.46 -30.73 30.4 -29.92 31.32 -29.1 32.24 -28.27 33.14 -27.42 34.03 -26.56 34.91 -25.69 35.78 -24.8 36.64 -23.92 37.5 -23.02 38.35 -22.12 39.19 -21.21 40.03 -20.3 40.86 -19.38 41.69 -18.47 42.52 -17.55 43.34 -16.62 44.17 -15.7 44.99 -14.78 45.81 -13.84 46.62 -12.93 47.45 -12.01 48.27 -11.09 49.1 -10.18 49.93 -9.27 50.77 -8.37 51.62 -7.48 52.47 -6.6 53.34 -5.73 54.21 -4.88 55.09 -4.05 56 -3.24 56.92 -2.45 57.87 -1.7 58.83 -0.99 59.83 -0.34 60.87 0.25 61.01 0.91 59.98 1.6 58.98 2.35 58 3.13 57.07 3.94 56.14 4.78 55.24 5.64 54.35 6.51 53.48 7.38 52.61 8.28 51.76 9.17 50.92 10.08 50.08 10.99 49.25 11.9 48.42 12.83 47.59 13.75 46.77 14.67 45.95 15.6 45.12 16.52 44.3 17.44 43.48 18.36 42.65 19.27 41.82 20.2 40.99 21.11 40.16 22.02 39.32 22.91 38.48 23.81 37.64 24.7 36.77 25.57 35.92 26.44 35.04 27.3 34.16 28.16 33.27 28.99 32.37 29.82 31.45 30.62 30.53 31.42 29.6 32.19 28.65 32.95 27.68 33.68 26.7 34.39 25.7 35.07 24.69 35.73 23.66 36.34 22.61 36.92 21.54 37.46 20.46 37.96 19.35 38.4 18.22 38.8 17.08 39.17 15.92 39.49 14.77 39.76 13.59 39.99 12.41 40.17 11.22 40.31 10.02 40.38 8.83 40.41 7.62 40.37 6.42 40.27 5.22 40.12 4.03 39.89 2.83 39.61 1.67 39.26 0.51 38.83 -0.62 38.35 -1.72 37.78 -2.81 37.16 -3.85 36.46 -4.86 35.72 -5.83 34.9 -6.74 34.02 -7.62 33.09 -8.43 32.1 -9.18 31.07 -9.87 29.99 -10.49 28.87 -11.05 27.7 -11.53 26.52 -11.94 25.3 -12.28 24.08 -12.53 22.83 -12.7 21.56 -12.79 20.3 -12.82 19.03 -12.76 17.78 -12.62 16.53 -12.41 15.31 -12.12 14.1 -11.76 12.92 -11.34 11.77 -10.84 10.64 -10.28 9.55 -9.66 8.5 -9 7.49 -8.28 6.52 -7.52 5.57 -6.72 4.67 -5.88 3.82 -4.99 2.99 -4.08 2.21 -3.13 1.46 -2.16 0.76 -1.16 0.09 -0.15 0 0 " stroke-dasharray="1, 0.1" stroke="none" fill="red" id="ele_1"/>
<path d="M 0 0 L -0.47 -0.48 -0.94 -0.95 -1.42 -1.43 -1.89 -1.9 -2.37 -2.38 -2.84 -2.85 -3.32 -3.33 -3.79 -3.8 -4.26 -4.27 -4.74 -4.75 -5.22 -5.22 -5.69 -5.69 -6.16 -6.17 -6.64 -6.65 -7.12 -7.12 -7.59 -7.59 -8.06 -8.07 -8.54 -8.55 -9.01 -9.02 -9.48 -9.49 -9.96 -9.97 -10.44 -10.44 -10.91 -10.91 -11.38 -11.39 -11.86 -11.87 -12.33 -12.34 -12.81 -12.81 -13.28 -13.29 -13.34 -13.77 -12.87 -14.24 -12.4 -14.71 -11.92 -15.19 -11.44 -15.66 -10.97 -16.13 -10.5 -16.61 -10.02 -17.09 -9.55 -17.56 -9.07 -18.03 -8.6 -18.51 -8.13 -18.98 -7.65 -19.46 -7.18 -19.93 -6.7 -20.41 -6.23 -20.88 -5.75 -21.36 -5.28 -21.83 -4.81 -22.3 -4.33 -22.78 -3.85 -23.25 -3.38 -23.73 -2.91 -24.2 -2.43 -24.68 -1.96 -25.15 -1.49 -25.62 -1.01 -26.1 -0.53 -26.58 -0.06 -27.05 -0.41 -27.52 -0.88 -28 -1.36 -28.47 -1.83 -28.94 -2.3 -29.42 -2.78 -29.9 -3.25 -30.37 -3.73 -30.84 -4.2 -31.32 -4.68 -31.8 -5.15 -32.27 -5.63 -32.74 -6.1 -33.22 -6.57 -33.69 -7.05 -34.16 -7.52 -34.64 -8 -34.94 -8.47 -34.47 -8.95 -34 -9.42 -33.52 -9.89 -33.05 -10.37 -32.57 -10.85 -32.1 -11.32 -31.62 -11.79 -31.15 -12.27 -30.68 -12.74 -30.2 -13.21 -29.73 -13.69 -29.25 -14.17 -28.78 -14.64 -28.3 -15.11 -27.83 -15.59 -27.35 -16.07 -26.88 -16.54 -26.41 -17.01 -25.93 -17.49 -25.45 -17.96 -24.99 -18.44 -24.51 -18.91 -24.03 -19.39 -23.56 -19.86 -23.09 -20.33 -22.61 -20.81 -22.13 -21.29 -21.66 -21.76 -21.76 -22.23 -22.24 -22.71 -22.72 -23.18 -23.19 -23.66 -23.66 -24.13 -24.14 -24.61 -24.61 -25.08 -25.09 -25.55 -25.56 -26.03 -26.04 -26.5 -26.51 -26.98 -26.98 -27.45 -27.46 -27.92 -27.93 -28.4 -28.41 -28.88 -28.88 -29.35 -29.36 -29.82 -29.83 -30.3 -30.31 -30.77 -30.78 -31.24 -31.25 -31.72 -31.73 -32.2 -32.21 -32.67 -32.68 -33.14 -33.15 -33.62 -33.63 -34.1 -34.1 -34.57 -34.57 -35.04 -35.01 -35.52 -34.53 -35.99 -34.06 -36.46 -33.59 -36.94 -33.11 -37.42 -32.63 -37.89 -32.16 -38.36 -31.69 -38.84 -31.21 -39.31 -30.74 -39.79 -30.27 -40.26 -29.79 -40.74 -29.31 -41.21 -28.84 -41.69 -28.37 -42.16 -27.89 -42.63 -27.41 -42.77 -26.94 -42.3 -26.47 -41.82 -25.99 -41.35 -25.52 -40.87 -25.05 -40.4 -24.57 -39.93 -24.1 -39.45 -23.62 -38.97 -23.15 -38.5 -22.67 -38.03 -22.2 -37.55 -21.72 -37.08 -21.25 -36.61 -20.78 -36.13 -20.3 -35.65 -19.83 -35.18 -19.35 -34.71 -18.88 -34.23 -18.4 -33.75 -17.93 -33.28 -17.46 -32.81 -16.98 -32.33 -16.5 -31.86 -16.03 -31.39 -15.56 -30.91 -15.08 -30.43 -14.6 -29.96 -14.14 -29.49 -13.66 -29.76 -13.18 -30.24 -12.71 -30.71 -12.24 -31.18 -11.76 -31.66 -11.28 -32.13 -10.81 -32.61 -10.34 -33.08 -9.86 -33.56 -9.38 -34.03 -8.91 -34.51 -8.44 -34.98 -7.96 -35.45 -7.49 -35.93 -7.02 -36.4 -6.54 -36.87 -6.07 -37.35 -5.59 -37.83 -5.12 -38.3 -4.64 -38.77 -4.17 -39.25 -3.69 -39.73 -3.22 -40.2 -2.75 -40.67 -2.27 -41.15 -1.8 -41.62 -1.32 -42.09 -0.85 -42.57 -0.37 -42.83 0.1 -42.36 0.57 -41.89 1.05 -41.41 1.53 -40.94 2 -40.46 2.47 -39.99 2.95 -39.51 3.43 -39.04 3.89 -38.57 4.37 -38.09 4.85 -37.62 5.32 -37.14 5.79 -36.67 6.27 -36.19 6.75 -35.72 7.22 -35.24 7.69 -34.77 7.66 -34.3 7.18 -33.82 6.71 -33.34 6.24 -32.87 5.76 -32.4 5.29 -31.92 4.81 -31.45 4.34 -30.97 3.87 -30.5 3.39 -30.02 2.92 -29.55 2.44 -29.08 1.97 -28.6 1.49 -28.12 1.02 -27.65 0.55 -27.18 0.07 -26.7 -0.41 -26.23 -0.88 -25.76 -1.35 -25.28 -1.83 -24.8 -2.31 -24.33 -2.78 -23.86 -3.25 -23.38 -3.73 -22.9 -4.2 -22.43 -4.67 -21.96 -5.15 -21.48 -5.63 -21.01 -5.18 -20.54 -4.71 -20.06 -4.23 -19.59 -3.76 -19.11 -3.28 -18.64 -2.81 -18.16 -2.33 -17.69 -1.86 -17.21 -1.39 -16.74 -0.91 -16.26 -0.44 -15.79 0.04 -15.31 0.51 -14.84 0.99 -14.37 1.46 -13.89 1.94 -13.42 2.41 -12.95 2.89 -12.47 3.36 -11.99 3.83 -11.52 4.31 -11.05 4.78 -10.57 5.26 -10.09 5.73 -9.62 6.2 -9.15 6.68 -8.67 7.16 -8.2 7.63 -7.73 7.73 -7.25 7.25 -6.77 6.77 -6.3 6.3 -5.83 5.83 -5.35 5.35 -4.87 4.88 -4.4 4.4 -3.93 3.93 -3.45 3.45 -2.98 2.98 -2.51 2.51 -2.03 2.03 -1.56 1.55 -1.08 1.08 -0.61 0.61 -0.13 0.13 0 0 " id="ele_2" stroke="none" fill="blue" stroke-dasharray="1, 0.1" />
<path d="M 0 0 L 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 0 10 0 11 0 12 0 13 0 14 0 15 0 15.75 0.25 15.75 1.25 15.75 2.25 15.75 3.25 15.75 4.25 15.75 5.25 15.75 6.25 15.75 7.25 15.75 8.25 15.75 9.25 15.75 10.25 15.75 11.25 15.75 12.25 15.75 13.25 14.92 13.42 13.92 13.42 12.92 13.42 11.92 13.42 10.92 13.42 9.92 13.42 8.92 13.42 7.92 13.42 6.92 13.42 5.92 13.42 4.92 13.42 3.92 13.42 2.92 13.42 1.92 13.42 0.92 13.42 0 13.34 0 12.34 0 11.34 0 10.34 0 9.34 0 8.34 0 7.34 0 6.34 0 5.34 0 4.34 0 3.34 0 2.34 0 1.34 0 0.34 0 0" stroke-dasharray="1, 0.1" stroke="none" fill="yellow" id="ele_3"/>
</svg>
这里是JavaScript
var elements=['ele_1','ele_2','ele_3'];
for(var ele in elements){
ele=elements[ele];
ele=document.getElementById(ele);
if(ele)
positionEleToCenter(ele);
}
function positionEleToCenter(element){
var bbox=element.getBBox();
var svg=document.getElementById('mainsvg');
var viewBox=svg.getAttribute('viewBox');
viewBox=viewBox.split(' ');
var cx=parseFloat(viewBox[0])+(parseFloat(viewBox[2])/2);
var cy=parseFloat(viewBox[1])+(parseFloat(viewBox[3])/2);
var x=cx-(bbox.width/2);
var y=cy-(bbox.height/2);
var matrix='1 0 0 1 '+x+' '+y;
element.setAttribute('transform','matrix('+matrix+')');
}
答案 0 :(得分：4)
您不允许BBox X和Y偏移。您需要像这样修改翻译向量：
var x=cx - bbox.x - (bbox.width/2);
var y=cy - bbox.y - (bbox.height/2);