将SVG集中在SVG中

时间：2017-04-02 23:19:05

标签： javascript css html5 css3 svg

我正在开展一个项目，我们需要让用户上传他们的SVG并让他们能够对它们进行某些修改。

为此，我们定义了一个根级SVG和用户上传SVG的组。

我面临的问题是，具有不同ViewBox设置的不同SVG会在根SVG中的不同位置呈现。我附上了这个样本图片和一个小提琴：https://jsfiddle.net/gsp4k6n7/2/

以下是在根目录中加载SVG的代码：

loadImage = function(svgData) {
   var root = document.getElementById('__root_group__');
   root.innerHTML = svgData;
}

SVG 1

SVG 2

我尝试了transform: translate(x, y)，但似乎并不适用于所有情况。例如，以下代码能够将第一个图像与DigitalOcean徽标居中，但第二个图像偏离中心。

alignImage = function() {
  var svg = document.getElementById('__root_svg__');
  var group = document.getElementById('__root_group__');

  var sr = svg.getBoundingClientRect();
  var gr = group.getBoundingClientRect();

  var x = (sr.width - gr.width) / 2;
  var y = (sr.height - gr.height) / 2;

  group.setAttribute('transform', `translate(${x},${y})`);
}

在根SVG中水平和垂直对齐所有导入的SVG的最佳方法是什么？

2 个答案:

答案 0 :(得分：1)

如果您不需要根SVG，则只需使用普通的CSS。

请参阅fiddle

＆＃13;
＆＃13; 
var VB_REGEX = /viewBox="(\d+) (\d+) (\d+) (\d+)"/g;

var img1 = `
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="192px" viewBox="0 0 256 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
	<g fill="#0080FF">
		<path d="M127.806368,103.431977 L127.806368,128.137065 C169.680136,128.137065 202.283513,87.6839887 188.5857,43.8050085 C182.599796,24.6296657 167.363082,9.39295184 148.187739,3.40704816 C104.308759,-10.2907649 63.8549575,22.3133371 63.8549575,64.1871048 L88.6166119,64.1871048 C88.620238,64.1871048 88.6231388,64.1805779 88.6231388,64.1805779 C88.6267649,37.901779 114.633609,17.5849518 142.262028,27.610289 C152.497677,31.3248272 160.662119,39.4878187 164.378833,49.7227422 C174.405673,77.3349616 154.119391,103.331553 127.862935,103.368844 L127.862935,78.7435694 C127.862935,78.7435694 127.860759,78.742119 127.858584,78.742119 L103.173076,78.742119 C103.170901,78.742119 103.168725,78.745745 103.168725,78.745745 L103.168725,103.431977 L127.806368,103.431977 Z M103.164374,122.405711 L84.1971671,122.405711 L84.1928159,122.40136 L84.1928159,103.431977 L103.168725,103.431977 L103.168725,122.40136 C103.168725,122.40136 103.16655,122.405711 103.164374,122.405711 Z M84.2058697,103.431977 L68.3055864,103.431977 C68.2990595,103.431977 68.293983,103.427626 68.293983,103.427626 L68.293983,87.5345949 C68.293983,87.5345949 68.2990595,87.5229915 68.3055864,87.5229915 L84.1942663,87.5229915 C84.2007932,87.5229915 84.2058697,87.528068 84.2058697,87.528068 L84.2058697,103.431977 Z"></path>
		<path d="M22.0964986,153.197507 C18.8772805,150.963853 14.8712068,149.831796 10.1899603,149.831796 L0,149.831796 L0,182.161042 L10.1899603,182.161042 C14.8596034,182.161042 18.8671275,180.965892 22.1001246,178.611127 C23.8594901,177.362312 25.241745,175.61745 26.2091785,173.426584 C27.1715354,171.24732 27.6596034,168.676442 27.6596034,165.78647 C27.6596034,162.929858 27.1715354,160.39234 26.2084533,158.243535 C25.241745,156.084578 23.8580397,154.386856 22.0964986,153.197507 Z M5.9518187,155.296272 L9.15000567,155.296272 C12.7086232,155.296272 15.6377564,155.996102 17.8590822,157.379082 C20.3248045,158.865768 21.575796,161.694096 21.575796,165.78647 C21.575796,170.001405 20.3219037,172.957371 17.8503796,174.57532 L17.848204,174.57532 C15.7211558,175.982232 12.8094278,176.695841 9.19424363,176.695841 L5.9518187,176.695841 L5.9518187,155.296272 Z M31.8332011,182.161042 L37.5631048,182.161042 L37.5631048,159.390822 L31.8332011,159.390822 L31.8332011,182.161042 Z M34.7529065,149.433654 C33.7738697,149.433654 32.9297224,149.781031 32.2501983,150.46128 C31.5626969,151.116147 31.2138697,151.946516 31.2138697,152.929178 C31.2138697,153.908215 31.5605212,154.751637 32.245847,155.436238 C32.9297224,156.121564 33.7738697,156.468941 34.7529065,156.468941 C35.7319433,156.468941 36.5753654,156.121564 37.2606912,155.436238 C37.9467422,154.750912 38.2933938,153.90749 38.2933938,152.929178 C38.2933938,151.947966 37.9445666,151.117598 37.2606912,150.465632 C36.5753654,149.781031 35.7319433,149.433654 34.7529065,149.433654 Z M58.3709008,161.293054 C56.6434448,159.756329 54.7143796,158.859966 52.6279433,158.859966 C49.4652918,158.859966 46.8363966,159.954312 44.8152295,162.109643 C42.7686799,164.248295 41.7301756,167.000476 41.7301756,170.289314 C41.7301756,173.503456 42.752,176.24621 44.7717167,178.445779 C46.8073881,180.573552 49.4507875,181.651943 52.6279433,181.651943 C54.8369405,181.651943 56.7355467,181.036963 58.2831501,179.822232 L58.2831501,180.346561 C58.2831501,182.235739 57.7769518,183.705745 56.7797847,184.715241 C55.7833428,185.723286 54.4010878,186.233836 52.6729065,186.233836 C50.0280567,186.233836 48.370221,185.194606 46.3519547,182.467082 L42.4503116,186.215705 L42.5554674,186.363649 C43.3981643,187.54647 44.6890425,188.703909 46.3925666,189.804057 C48.0968159,190.899127 50.2390935,191.456091 52.7606572,191.456091 C56.1626289,191.456091 58.914085,190.407433 60.9403286,188.339853 C62.9781756,186.261394 64.0116034,183.478028 64.0116034,180.070255 L64.0116034,159.390822 L58.3709008,159.390822 L58.3709008,161.293054 Z M56.8682606,174.741394 C55.8667422,175.878527 54.5809405,176.429688 52.9376091,176.429688 C51.2950028,176.429688 50.0164533,175.878527 49.0294391,174.742844 C48.0475014,173.612238 47.5485552,172.113949 47.5485552,170.289314 C47.5485552,168.434946 48.0475014,166.917802 49.0301643,165.779218 C50.0033994,164.652963 51.3182096,164.081496 52.9376091,164.081496 C54.5794901,164.081496 55.866017,164.637008 56.8675354,165.782119 C57.8654278,166.919977 58.3709008,168.436397 58.3709008,170.289314 C58.3709008,172.113224 57.8654278,173.611513 56.8682606,174.741394 Z M68.9154901,182.161042 L74.6453938,182.161042 L74.6453938,159.390822 L68.9154901,159.390822 L68.9154901,182.161042 Z M71.8359207,149.433654 C70.8561586,149.433654 70.0120113,149.781031 69.3324873,150.46128 C68.6449858,151.116147 68.2961586,151.946516 68.2961586,152.929178 C68.2961586,153.908215 68.6428102,154.751637 69.328136,155.436238 C70.0120113,156.121564 70.8561586,156.468941 71.8359207,156.468941 C72.8142323,156.468941 73.6576544,156.121564 74.3437054,155.436238 C75.0290312,154.750912 75.3756827,153.90749 75.3756827,152.929178 C75.3756827,151.947966 75.0268555,151.117598 74.3437054,150.465632 C73.6576544,149.781031 72.8142323,149.433654 71.8359207,149.433654 Z M87.203898,153.238844 L81.5631955,153.238844 L81.5631955,159.390822 L78.2874108,159.390822 L78.2874108,164.613076 L81.5631955,164.613076 L81.5631955,174.071297 C81.5631955,177.03089 82.1542436,179.14851 83.3211105,180.364691 C84.4908782,181.586674 86.5678867,182.206006 89.4948442,182.206006 C90.426017,182.206006 91.3629915,182.174822 92.2789348,182.115354 L92.5371105,182.097949 L92.5371105,176.880045 L90.5725099,176.983025 C89.2083853,176.983025 88.2975184,176.74298 87.8645666,176.271592 C87.425813,175.792227 87.203898,174.77838 87.203898,173.259059 L87.203898,164.613076 L92.5371105,164.613076 L92.5371105,159.390822 L87.203898,159.390822 L87.203898,153.238844 Z M112.201972,161.094346 L112.201246,161.094346 C110.465088,159.612011 108.064635,158.859966 105.068057,158.859966 C103.161473,158.859966 101.378901,159.278414 99.7660283,160.096453 C98.2742663,160.85285 96.8093371,162.106017 95.8781643,163.745722 L95.9361813,163.815343 L99.6050312,167.327547 C101.116374,164.918391 102.796691,164.081496 105.024544,164.081496 C106.22187,164.081496 107.215411,164.402765 107.979059,165.035875 C108.738357,165.664635 109.108215,166.464544 109.108215,167.478391 L109.108215,168.58434 C107.687524,168.152113 106.270459,167.933099 104.89183,167.933099 C102.040295,167.933099 99.7203399,168.603921 97.9965099,169.926708 C96.2509235,171.266176 95.3661643,173.182187 95.3661643,175.622527 C95.3661643,177.761904 96.1124079,179.499513 97.5889405,180.791841 C99.0785269,182.037756 100.939422,182.670867 103.121586,182.670867 C105.303025,182.670867 107.343773,181.791184 109.196691,180.286368 L109.196691,182.161042 L114.838119,182.161042 L114.838119,167.523354 C114.838119,164.751592 113.951184,162.589008 112.201972,161.094346 Z M102.028691,173.459943 C102.678482,173.006686 103.596601,172.778244 104.758391,172.778244 C106.137745,172.778244 107.600499,173.055275 109.108215,173.602085 L109.108215,175.835739 C107.863025,176.993178 106.199388,177.580601 104.162266,177.580601 C103.170176,177.580601 102.399275,177.360136 101.869144,176.924283 C101.349167,176.497858 101.096068,175.955399 101.096068,175.267898 C101.096068,174.486844 101.401382,173.895071 102.028691,173.459943 Z M119.403331,182.161042 L125.133235,182.161042 L125.133235,149.831796 L119.403331,149.831796 L119.403331,182.161042 Z M145.922176,182.648385 C136.732283,182.648385 129.256068,175.17217 129.256068,165.981552 C129.256068,156.79166 136.732283,149.315445 145.922176,149.315445 C155.112068,149.315445 162.588283,156.79166 162.588283,165.981552 C162.588283,175.17217 155.112068,182.648385 145.922176,182.648385 Z M145.922176,155.188941 C139.971082,155.188941 135.129564,160.030459 135.129564,165.981552 C135.129564,171.933371 139.971082,176.774164 145.922176,176.774164 C151.873269,176.774164 156.714788,171.933371 156.714788,165.981552 C156.714788,160.030459 151.873269,155.188941 145.922176,155.188941 Z M183.018969,174.019082 C181.994244,175.167819 180.945586,176.163535 180.1377,176.681337 L180.1377,176.682062 C179.345768,177.190436 178.3457,177.448612 177.166504,177.448612 C175.47821,177.448612 174.120612,176.833632 173.014663,175.567411 C171.915241,174.307717 171.357552,172.689042 171.357552,170.75345 C171.357552,168.818584 171.907989,167.202085 172.993632,165.951819 C174.085076,164.69285 175.435422,164.081496 177.122266,164.081496 C178.967932,164.081496 180.913677,165.228782 182.580941,167.200635 L186.368,163.568771 C183.898652,160.355354 180.749054,158.859966 176.990278,158.859966 C173.843581,158.859966 171.116782,160.005802 168.885303,162.264839 C166.664703,164.507195 165.539173,167.363807 165.539173,170.75345 C165.539173,174.143819 166.663977,177.006958 168.881677,179.264544 C171.101552,181.524306 173.829802,182.670867 176.990278,182.670867 C181.138493,182.670867 184.486799,180.879592 186.744385,177.598731 L183.018969,174.019082 Z M206.535433,162.572329 C205.723195,161.439547 204.616521,160.52868 203.24587,159.86221 C201.878844,159.19719 200.285552,158.859966 198.510958,158.859966 C195.312771,158.859966 192.695479,160.039887 190.730153,162.369269 C188.822844,164.680521 187.856861,167.553088 187.856861,170.908646 C187.856861,174.359207 188.917122,177.215819 191.00936,179.397983 C193.089269,181.569269 195.874085,182.670867 199.285484,182.670867 C203.149416,182.670867 206.320045,181.108034 208.708895,178.025881 L208.837983,177.859807 L205.100238,174.26783 C204.753586,174.685552 204.262618,175.159841 203.814436,175.581915 C203.248771,176.115671 202.71719,176.529042 202.148623,176.811875 C201.292147,177.2383 200.331966,177.448612 199.257201,177.448612 C197.669711,177.448612 196.354901,176.981575 195.349756,176.060555 C194.409881,175.199003 193.86017,174.037212 193.714402,172.602017 L208.89455,172.602017 L208.94604,170.510504 C208.94604,169.030346 208.744431,167.604578 208.347014,166.271637 C207.949598,164.936521 207.339694,163.691331 206.535433,162.572329 Z M194.012465,167.933099 C194.288045,166.84383 194.789892,165.936589 195.508578,165.232408 C196.28528,164.468034 197.295501,164.081496 198.512408,164.081496 C199.90119,164.081496 200.97668,164.476011 201.707694,165.25779 C202.385768,165.980102 202.767955,166.879365 202.847728,167.933099 L194.012465,167.933099 Z M228.53983,161.094346 L228.539105,161.094346 C226.802946,159.612011 224.402493,158.859966 221.405915,158.859966 C219.499331,158.859966 217.716759,159.278414 216.103887,160.096453 C214.611399,160.85285 213.14647,162.106017 212.216023,163.745722 L212.27404,163.815343 L215.94289,167.327547 C217.454232,164.918391 219.13455,164.081496 221.362402,164.081496 C222.559728,164.081496 223.553269,164.402765 224.316918,165.035875 C225.076215,165.664635 225.446074,166.464544 225.446074,167.478391 L225.446074,168.58434 C224.024657,168.152113 222.608317,167.933099 221.228963,167.933099 C218.378153,167.933099 216.057473,168.603921 214.334368,169.926708 C212.588782,171.266176 211.704023,173.182187 211.704023,175.622527 C211.704023,177.761904 212.450266,179.499513 213.926799,180.791841 C215.41566,182.037756 217.27728,182.670867 219.459445,182.670867 C221.640884,182.670867 223.681632,181.791184 225.533824,180.286368 L225.533824,182.161042 L231.175977,182.161042 L231.175977,167.523354 C231.175977,164.751592 230.289042,162.589008 228.53983,161.094346 Z M218.36655,173.459943 C219.01634,173.006686 219.934459,172.778244 221.096249,172.778244 C222.475603,172.778244 223.938357,173.055275 225.446074,173.602085 L225.446074,175.835739 C224.200159,176.993178 222.537246,177.580601 220.499399,177.580601 C219.508034,177.580601 218.737133,177.360136 218.207003,176.924283 C217.687025,176.497858 217.433926,175.955399 217.433926,175.267898 C217.433926,174.486844 217.739241,173.895071 218.36655,173.459943 Z M253.218085,161.541076 C251.621892,159.762856 249.379535,158.859966 246.551207,158.859966 C244.278391,158.859966 242.432,159.512657 241.051195,160.800635 L241.051195,159.390822 L235.432249,159.390822 L235.432249,182.161042 L241.162153,182.161042 L241.162153,169.603263 C241.162153,167.877983 241.572623,166.508057 242.38196,165.53047 C243.189847,164.555785 244.300147,164.081496 245.77668,164.081496 C247.07481,164.081496 248.058198,164.50502 248.784136,165.376 C249.512975,166.251331 249.882108,167.456635 249.882108,168.962176 L249.882108,182.161042 L255.612011,182.161042 L255.612011,168.962176 C255.612011,165.808227 254.807025,163.312045 253.218085,161.541076 Z"></path>
	</g>
</svg>
`;

var img2 = `
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 432 432" style="enable-background:new 0 0 432 432;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#C77B32;}
	.st1{fill:#65C8D0;}
	.st2{fill:#838BC5;}
	.st3{fill:#404041;}
	.st4{fill:#D87985;}
</style>
<g>
	<path d="M192.8,191.2c-0.5,0.9-1,1.8-1.5,2.7c-2.1,4.1-4.1,8.3-6.3,12.4c-2.2,4.1-4.5,8.2-6.9,12.2c-0.7,1.2-1.6,2.2-2.5,3.2
		c-2.1,2.3-5.1,2.1-7.1-0.3c-0.6-0.8-1.2-1.7-1.7-2.6c-2.1-4.5-3.4-9.2-3.9-14.2c-0.2-2.1-0.5-4.2-0.5-6.3c-0.1-3.6,0-7.2,0.1-10.8
		c0.1-2.7,0.3-5.3,0.5-8c0.1-1.7,0.3-3.3,0.6-5c0.2-1.2,0.6-2.4,1.5-3.4c1.7-1.8,4.4-1.6,5.8,0.5c1,1.4,1.3,3.1,1.6,4.7
		c0.5,3,0.5,6,0.4,9.1c-0.1,5-0.1,10-0.1,15c0,2.8,0.2,5.7,0.4,8.5c0.2,2.4,0.5,4.8,0.7,7.2c0,0.3,0.1,0.5,0.2,1c1-1,1.7-1.9,2.4-3
		c3.4-5.2,6.2-10.6,9-16.1c2.4-4.7,5-9.4,7.5-14.1c0.7-1.4,1.4-2.8,2-4.2c0.3-0.5,0.5-1.1,0.7-1.6c1.3-2.6,4.5-2.8,6.2-0.5
		c0.7,0.9,1.1,1.9,1.3,3.1c0.1,1.4,0.3,2.8,0.3,4.2c-0.1,4.8-0.3,9.7-0.5,14.5c-0.2,4.7-0.2,9.4,0.3,14.1c0.1,0.6,0.2,1.2,0.3,1.8
		c0.8,0,1.3-0.5,1.8-0.8c2.6-1.9,4.7-4.2,6.6-6.7c4.8-6.2,8-13.2,10.2-20.8c0.2-0.8,0.1-1.4-0.6-2c-2.3-2.1-4.5-4.2-6.3-6.7
		c-2.6-3.6-4.6-7.5-5.1-12c-0.1-1.1-0.1-2.3,0-3.5c0.3-2.5,1.6-4.3,4-5.1c2.3-0.8,4.3,0,6.1,1.6c1.4,1.2,2.3,2.7,3.2,4.3
		c1.9,3.8,3,7.8,3.3,12.1c0.1,0.8,0.4,1.2,1,1.6c4.4,2.9,8.5,6.1,12.4,9.6c0.6,0.5,1.1,1.1,1.7,1.8c0.9-0.7,1.8-1.4,2.6-2.1
		c2.5-2.1,4.9-4.2,7.4-6.3c1-0.8,1.3-1.7,1.3-3c-0.2-4.8-0.3-9.5-0.4-14.3c0-0.4,0-0.7,0-1.1c-0.1-1.1-0.2-1.2-1.3-1.3
		c-3.9-0.3-7.3,1-10.4,3.2c-0.2,0.1-0.4,0.3-0.6,0.4c-0.7,0.4-1.4,0.5-1.9,0.1c-0.6-0.4-0.9-1.1-0.7-1.8c0.1-0.5,0.3-1,0.7-1.4
		c0.6-0.7,1.3-1.4,2.1-1.9c3.3-2.1,6.9-3.2,10.9-3c1.1,0.1,1.2-0.1,1.2-1.2c0.1-4.2,0.1-8.4,0.3-12.6c0.2-3.5,0.6-6.9,1.9-10.2
		c0.4-0.9,0.8-1.7,1.6-2.3c1.2-0.9,2.5-0.7,3.4,0.4c0.4,0.6,0.8,1.3,1,2c0.5,2.3,1,4.5,1.3,6.8c0.5,4.2,0.7,8.4,0.8,12.6
		c0,2.2,0.1,4.3,0.1,6.5c0,0.7,0.3,1.1,0.9,1.3c4.2,1.6,8.5,3.1,13,3.7c3.3,0.5,6.6,0.5,9.9-0.5c2.7-0.9,5.2-2.2,6.4-5
		c1.4-3.3,0.6-6.5-2.7-8.3c-1.1-0.6-2.3-1-3.4-1.5c-1-0.5-1.4-1.6-0.8-2.5c0.4-0.6,1.1-0.7,1.7-0.6c7.4,1.2,10.6,7.6,8.5,13.6
		c-1.6,4.5-5,6.8-9.3,8.2c-2.8,0.9-5.7,1-8.7,0.9c-4.8-0.2-9.3-1.2-13.8-3c-0.4-0.2-0.8-0.3-1.4-0.5c-0.1,0.4-0.2,0.8-0.2,1.1
		c0.3,5.8,0.5,11.7,0.8,17.5c0.3,4.5,0.6,9.1,1.1,13.6c0.5,4.4,1,8.8,2.5,13.1c0.4,1.2,0.9,2.3,1.5,3.4c0.5,0.9,0.9,1,1.6,0.4
		c0.9-0.7,1.8-1.5,2.5-2.4c1.3-1.8,2.6-3.6,3.6-5.5c2.3-4.2,4.4-8.5,5.9-13.1c0.3-0.8,0.4-1.6,0.7-2.4c0.2-0.4,0.5-0.9,1-1.1
		c1.1-0.5,2.3,0.3,2.1,1.6c-0.2,1.3-0.4,2.7-0.9,4c-1.3,3.4-2.8,6.7-4.3,10c-0.5,1.1-1,2.1-1.5,3.1c-1.5,3.1-3.4,6-5.8,8.5
		c-0.5,0.5-1,1-1.5,1.4c-2.9,2.1-6.1,2-8.8-0.4c-3.1-2.9-5.4-6.4-7-10.4c-1.1-2.9-1.8-5.9-2.3-9c-0.6-3.8-0.8-7.7-1.1-11.6
		c-0.1-0.9-0.2-1.9-0.4-3.1c-3.2,2.8-6.3,5.4-9.3,8.2c0.6,0.9,1.2,1.6,1.7,2.4c2.6,4.1,4.6,8.5,4.2,13.5c-0.3,4-1.6,7.7-4.7,10.4
		c-2.7,2.3-5.8,3-9.2,1.6c-1.3-0.5-2.3-1.4-3.1-2.5c-2.2-3.1-3-6.6-2.3-10.4c0.5-3.1,1.8-5.8,3.3-8.4c0.2-0.4,0.4-0.8,0.7-1.3
		c-2.7-3.1-5.8-5.6-9.2-8.2c-0.4,1.2-0.7,2.1-1,3.1c-1.7,5.5-4.3,10.7-7.4,15.5c-2.3,3.5-4.9,6.9-7.8,9.9c-1.5,1.5-3,3-5,3.8
		c-2.4,1-4.6,0.5-6.5-1.2c-2.4-2.1-3.5-4.9-4.4-7.8c-1.2-4.1-1.3-8.4-1.1-12.6c0.1-2.6,0.3-5.2,0.5-7.8
		C192.9,191.3,192.9,191.2,192.8,191.2z M223.4,173.8c-0.4-3.7-1.5-7.2-3.7-10.2c-0.4-0.6-1-1-1.6-1.4c-0.5-0.4-1.1-0.6-1.7-0.2
		c-0.6,0.3-0.7,1-0.6,1.6c0,0.4,0.1,0.9,0.3,1.3C217.2,168.8,220.2,171.4,223.4,173.8z M237.6,200.1c-0.3,0.3-0.4,0.4-0.5,0.5
		c-0.8,1.5-1.3,3-1.6,4.6c-0.3,1.7-0.2,3.4,0.4,4.9c0.3,0.7,0.6,1.3,1.1,1.8c0.7,0.8,1.4,0.8,1.9-0.1c0.4-0.7,0.7-1.5,0.9-2.3
		C240.6,206.2,239.2,203.2,237.6,200.1z"/>
	<path class="st0" d="M217.3,131.6c0.4,0.3,0.7,0.5,1,0.8c5.7,4.2,11.7,8,17.9,11.4c1.2,0.7,2.4,1.4,3.6,2.1c1.3,0.8,1.5,1.4,1,2.8
		c-0.3,0.8-0.6,1.6-1.1,2.3c-1.4,2.1-3.2,2.6-5.3,1.5c-2-1.1-4-2.2-5.9-3.5c-5-3.3-10-6.7-15.1-10c-0.2-0.2-0.5-0.3-0.8-0.4
		c-0.9,0.6-1.3,1.6-1.8,2.5c-1.2,1.7-2.4,3.5-3.5,5.3c-0.2,0.4-0.5,0.7-0.8,1c-1,1-2.1,1.4-3.5,0.9c-2.9-0.9-5.6-2-8.3-3.3
		c-6.8-3.3-13.3-7.4-19.2-12.2c-4-3.3-7.8-6.8-10.9-10.9c-3-3.9-5.4-8-6.7-12.8c-0.7-2.8-0.9-5.6,0.1-8.4c1-2.6,2.8-4.4,5.3-5.6
		c1.7-0.7,3.4-1.1,5.2-1.2c3.7-0.2,7.2,0.4,10.7,1.6c6.6,2.3,12.9,5.4,19,8.9c4,2.2,7.9,4.6,11.7,7c3.5,2.3,6.9,4.7,10.4,7.1
		c0.6,0.4,1.1,0.8,1.6,1.3c1.3,1.2,1.5,2.4,0.5,4c-0.8,1.3-1.7,2.6-2.6,3.9C219.1,128.9,218.2,130.2,217.3,131.6z M203.3,137.3
		c0-0.8-0.3-1.3-0.8-1.7c-1.1-0.6-2.3-1.3-3.4-2c-6.8-4.1-13.8-8.1-20.3-12.8c-1.3-0.9-2.7-1.5-4.1-2.2c-0.6-0.3-1.3-0.1-1.7,0.5
		c-0.4,0.5-0.5,1.2-0.2,1.8c0.2,0.4,0.4,0.8,0.7,1.1c0.6,0.6,1.2,1.2,1.8,1.7c1.6,1.2,3.2,2.4,4.9,3.5c6.1,4,12.5,7.5,19.1,10.5
		c0.6,0.3,1.3,0.5,2,0.7C202.3,138.8,203.3,138.1,203.3,137.3z M177,113.1c0.1,0.1,0.2,0.5,0.4,0.7c0.4,0.4,0.8,0.7,1.2,0.9
		c2.2,1.4,4.4,2.7,6.6,4.1c6,4,12.4,7.5,18.7,11.1c0.8,0.4,1.6,0.8,2.4,1.2c0.5,0.3,1,0.1,1.4-0.3c0.4-0.4,0.4-1,0.1-1.4
		c-0.2-0.3-0.5-0.7-0.8-0.9c-1-0.8-1.9-1.6-3-2.2c-2.4-1.6-4.8-3.1-7.2-4.7c-3.8-2.5-7.6-5-11.5-7.4c-1.7-1.1-3.5-1.9-5.5-2.4
		c-0.5-0.1-1.1-0.3-1.6-0.3C177.5,111.5,177,112.1,177,113.1z M182.2,105.1c-1.2,0-1.8,0.3-2,0.9c-0.2,0.6,0.1,1.3,0.7,1.8
		c0.3,0.2,0.5,0.4,0.8,0.5c1.4,0.7,2.7,1.5,4.1,2.2c3.7,2,7.5,4,11.1,6.1c3.5,2,6.8,4.1,10.2,6.2c1.4,0.9,2.7,1.8,4.1,2.6
		c0.8,0.4,1.5,0.3,1.8-0.3c0.3-0.5,0.2-1.1-0.5-1.7c-1.4-1.1-2.8-2.3-4.2-3.4c-4.9-3.6-9.9-7-15.1-10.1c-2.8-1.7-5.8-3.2-8.9-4.4
		C183.5,105.5,182.7,105.3,182.2,105.1z"/>
	<path d="M146.8,143.5c-0.6,0.2-1,0.3-1.4,0.4c-3.3,1.3-6.6,2.6-10,3.8c-0.9,0.3-1.8,0.5-2.7,0.7c-0.3,0.1-0.6,0.1-0.9,0
		c-0.7-0.1-1.1-0.5-1.3-1.1c-0.2-0.6,0-1.2,0.5-1.6c0.4-0.3,0.9-0.6,1.4-0.8c4.4-1.7,8.8-3.4,13.2-5.1c5.4-2,10.8-4,16.2-6
		c0.9-0.3,1.8-0.7,2.7-1c0.1,0,0.2-0.1,0.3-0.1c0.9-0.2,1.7,0.1,1.9,0.8c0.3,0.8,0,1.6-1,1.9c-2.3,1-4.6,1.9-6.9,2.8
		c-1.1,0.5-2.2,1-3.3,1.4c0,0.3,0,0.4,0,0.6c1.1,3.3,1.5,6.7,2.1,10.1c1.3,8,2.2,16.1,2.7,24.2c0.4,5.6,0.5,11.3,0,16.9
		c-0.5,6.3-2,12.4-4.9,18.1c-2.3,4.5-5.4,8.2-9.6,11c-1.8,1.2-3.7,2.1-5.8,2.5c-4.5,0.8-8.2-0.6-11.2-4c-2.3-2.6-3.6-5.6-4.4-8.9
		c-0.7-2.9-0.9-5.9-0.7-8.9c0.3-3.7,1.4-7.1,3.1-10.4c2.5-4.7,6-8.4,10.3-11.3c1.9-1.3,3.9-2.5,5.9-3.7c0.5-0.3,1-0.6,1.5-0.7
		c0.8-0.3,1.4,0.1,1.7,0.7c0.3,0.7,0.2,1.3-0.5,1.7c-0.8,0.5-1.7,1-2.5,1.5c-2.3,1.5-4.6,2.9-6.8,4.5c-4.5,3.4-7.4,7.9-8.7,13.4
		c-1.3,5.2-0.9,10.2,1.3,15.1c0.9,2.1,2.2,3.9,3.9,5.4c1.9,1.6,4,1.9,6.3,0.9c1.9-0.8,3.2-2.2,4.4-3.7c2.8-3.5,4.4-7.6,5.2-12
		c0.7-4.1,1.1-8.2,1.2-12.4c0.2-7.7-0.1-15.4-1-23.1c-0.6-5.6-1.3-11.3-1.9-16.9c-0.2-1.8-0.3-3.7-0.4-5.5
		C146.9,144.4,146.8,144,146.8,143.5z"/>
	<g>
		<path d="M197.5,296.1c0,0.6,0,1.1,0,1.5c0.1,2.4,0.2,4.7-0.4,7c-0.2,0.8-0.6,1.7-1,2.4c-1,1.7-3.3,2-4.7,0.6
			c-0.6-0.6-1.1-1.4-1.4-2.2c-0.6-1.7-1-3.5-1.2-5.4c-0.5-3.7-0.3-7.3-0.5-11c-0.1-2.5-0.5-5-0.6-7.5c-0.3-4.1-0.5-8.3-0.7-12.5
			c-0.2-5-0.3-10-0.3-15c0-4.6,0-9.3,0.1-13.9c0-2.2,0.2-4.3,0.5-6.5c0.2-1.6,0.6-3.1,1.8-4.2c1.1-1.1,2.9-1.1,4-0.1
			c0.7,0.6,1.3,1.3,1.5,2.2c0.3,1.1,0.6,2.2,0.8,3.4c0.7,5.4,0.9,10.9,0.9,16.4c0,4.8,0,9.7,0,14.5c0,5.1,0,10.2,0.1,15.2
			c0.1,2.5,0.5,5.1,0.7,7.6c0.1,1.1,0.2,2.1,0.4,3.3c8.2,0.6,16.3-0.1,24.5-0.4c0-0.9,0-1.7,0-2.5c-0.3-5.8-0.8-11.6-1-17.4
			c-0.3-6.4-0.3-12.8-0.5-19.2c-0.1-3.4-0.2-6.8-0.3-10.2c0-3.4,0-6.7,0.1-10.1c0-0.7,0.2-1.3,0.3-2c0.1-0.3,0.2-0.6,0.3-0.9
			c0.5-1.2,1.4-2,2.7-2.1c1.3-0.1,2.4,0.6,3,1.6c0.7,1.2,1.3,2.5,1.7,3.8c1.1,3.3,1.5,6.7,1.9,10.1c1.1,9.6,0.8,19.2,0.5,28.9
			c-0.2,8.3-0.6,16.5-0.9,24.8c-0.1,2.7,0,5.4,0,8.2c0,1.9-0.1,3.8-0.9,5.7c-0.4,1-1.1,1.6-2.1,1.8c-1.3,0.3-2.5-0.3-3-1.5
			c-0.3-0.7-0.5-1.5-0.5-2.2c-0.3-3.5-0.5-7-0.8-10.5c0-0.5-0.1-1-0.1-1.6c0-0.6-0.3-0.9-0.9-0.8c-2.9,0.2-5.7,0.4-8.6,0.5
			c-3.4,0.1-6.8,0-10.2,0C201,296.1,199.4,296.1,197.5,296.1z"/>
		<path d="M152.5,268.4c-0.2,6,0.2,11.8,1.1,17.5c0.5,3.4,1.3,6.8,2.2,10.2c0.8,2.8,1.9,5.4,3.5,7.8c0.5,0.7,1.1,1.4,1.7,2
			c1.2,1,2.3,1.1,3.6,0.3c2.2-1.2,3.5-3.2,4.7-5.3c1.6-3,2.9-6.2,4-9.5c1-2.9,2-5.9,2.9-8.9c0.4-1.1,1.2-1.8,2.1-1.6
			c1,0.3,1.5,1.2,1.2,2.4c-0.4,1.8-0.9,3.6-1.3,5.3c-0.9,3.9-1.9,7.8-3.6,11.5c-1.6,3.6-3.6,6.9-6.6,9.5c-3.5,3.1-8.5,3.5-12.4,0.9
			c-2.3-1.5-4.2-3.5-5.9-5.7c-3.6-5-5.7-10.7-6.9-16.7c-0.5-2.4-0.9-4.8-1.2-7.2c-0.5-3.8-0.6-7.5-0.4-11.3c0.1-3.7,0.5-7.3,1-11
			c0.7-5.2,1.6-10.2,3.1-15.2c1.4-4.9,3.3-9.7,6.4-13.8c1.5-2,3.1-3.7,5.2-5.1c3.6-2.3,7.9-1.9,11.1,0.9c2.1,1.9,3.6,4.2,4.6,6.8
			c1.7,4,2.6,8.2,2.9,12.5c0,0.9-0.1,1.8-0.3,2.6c-0.3,1-1.2,1.6-2.1,1.6c-1,0-1.8-0.7-2.1-1.7c-0.2-0.8-0.3-1.6-0.4-2.5
			c-0.4-3-0.8-6-1.6-8.9c-0.7-2.4-1.8-4.5-3.8-6c-1.1-0.8-2.1-0.9-3.1,0c-0.7,0.6-1.3,1.3-1.8,2.1c-1.9,2.9-3.2,6.1-4.1,9.4
			c-1.9,7.5-3,15.2-3.4,22.9C152.6,265.6,152.5,267,152.5,268.4z"/>
		<path d="M299,305c-0.4-0.1-0.8-0.1-1.2-0.1c-2.6,0-5.2,0-7.8,0.1c-4.3,0.1-8.6,0.3-12.9,0.5c-1.3,0-2.5,0-3.9,0c0-0.5,0-0.9,0-1.3
			c0-1.3,0.1-2.6,0.1-4c0.1-3.4,0.1-6.9,0.2-10.3c0-4.2,0.1-8.3,0.1-12.5c0-2.8,0-5.7,0-8.5c0-3.2,0-6.3,0-9.5
			c-0.1-3.9-0.2-7.8-0.4-11.7c-0.2-4.2-0.4-8.3-0.6-12.5c-0.2-2.5-0.5-4.9-1.2-7.3c-0.2-0.8-0.5-1.6-1-2.3c-1.1-1.6-3.4-1.5-4.5,0.1
			c-0.4,0.6-0.6,1.2-0.7,1.9c-0.2,1.5-0.4,2.9-0.5,4.4c-0.4,6.6-0.2,13.1-0.1,19.7c0.2,5.8,0.3,11.6,0.3,17.4c0.1,6.9,0,13.7,0,20.6
			c0,4.6,0.2,9.2,0.8,13.8c0.2,1.3,0.4,2.7,0.9,4c0.7,2,2.1,3.2,4.3,3.2c1.1,0,2.2-0.1,3.2-0.1c4.9-0.3,9.7-0.5,14.6-1.1
			c3.3-0.4,6.7-0.5,10-0.8c1.1-0.1,1.8-0.7,1.9-1.6C300.7,306,300.1,305.2,299,305z"/>
		<path d="M337.1,305c-0.4-0.1-0.8-0.1-1.2-0.1c-2.6,0-5.2,0-7.8,0.1c-4.3,0.1-8.6,0.3-12.9,0.5c-1.3,0-2.5,0-3.9,0
			c0-0.5,0-0.9,0-1.3c0-1.3,0.1-2.6,0.1-4c0.1-3.4,0.1-6.9,0.2-10.3c0-4.2,0.1-8.3,0.1-12.5c0-2.8,0-5.7,0-8.5c0-3.2,0-6.3,0-9.5
			c-0.1-3.9-0.2-7.8-0.4-11.7c-0.2-4.2-0.4-8.3-0.6-12.5c-0.2-2.5-0.5-4.9-1.2-7.3c-0.2-0.8-0.5-1.6-1-2.3c-1.1-1.6-3.4-1.5-4.5,0.1
			c-0.4,0.6-0.6,1.2-0.7,1.9c-0.2,1.5-0.4,2.9-0.5,4.4c-0.4,6.6-0.2,13.1-0.1,19.7c0.2,5.8,0.3,11.6,0.3,17.4c0.1,6.9,0,13.7,0,20.6
			c0,4.6,0.2,9.2,0.8,13.8c0.2,1.3,0.4,2.7,0.9,4c0.7,2,2.1,3.2,4.3,3.2c1.1,0,2.2-0.1,3.2-0.1c4.9-0.3,9.7-0.5,14.6-1.1
			c3.3-0.4,6.7-0.5,10-0.8c1.1-0.1,1.8-0.7,1.9-1.6C338.8,306,338.2,305.2,337.1,305z"/>
		<path d="M254,271.3c0,5.4,0,10.9,0,16.3c0,2.9,0.1,5.8,0.2,8.6c0.1,2.6,0.1,5.1,0.1,7.7c0,1-0.1,1.9-0.2,2.9
			c-0.2,1.4-0.9,2.6-2.4,3c-2.1,0.6-4-0.6-4.4-2.7c-0.5-2.4-0.9-4.7-1.1-7.1c-0.5-5.5-1-11-1.4-16.5c-0.3-5.7-0.4-11.3-0.7-17
			c-0.2-4.6-0.4-9.3-0.6-13.9c-0.1-3.4-0.1-6.7-0.1-10.1c0-2.1,0-4.2,0.1-6.4c0.1-2,0.3-4.1,0.6-6.1c0.1-1.1,0.7-2,1.5-2.8
			c1.6-1.4,3.9-1.4,5.2,0.2c0.6,0.7,1.1,1.7,1.4,2.6c0.9,2.6,1,5.3,1.2,7.9c0.3,4.3,0.5,8.6,0.4,12.9c-0.1,4.2,0.2,8.4,0.2,12.6
			C254,266.1,254,268.7,254,271.3C254,271.3,254,271.3,254,271.3z"/>
	</g>
	<path class="st0" d="M318.5,326.4c-6.7-0.3-13.3-0.5-20-0.8c-7.1-0.3-14.2-0.8-21.3-1.1c-6.4-0.3-12.8-0.4-19.2-0.5
		c-5.1-0.1-10.1-0.1-15.2,0c-5.2,0.1-10.5,0.2-15.7,0.5c-9.3,0.6-18.7,1.3-28,2.2c-7.8,0.7-15.6,1.7-23.3,3
		c-6.3,1.1-12.5,2.1-18.7,3.4c-7.6,1.5-15.1,3.2-22.6,4.9c-0.3,0.1-0.6,0.2-0.9,0.2c-0.6,0.1-1-0.2-1.2-0.8c-0.2-0.5,0-1,0.5-1.2
		c0.6-0.4,1.3-0.7,1.9-1c3.6-1.6,7.4-2.6,11.2-3.5c5-1.2,10-2.3,15-3.3c6.6-1.3,13.2-2.5,19.8-3.5c6.5-1,13-1.8,19.5-2.6
		c5-0.6,9.9-1.1,14.9-1.5c6.5-0.5,13-1,19.5-1.3c4.8-0.3,9.7-0.3,14.5-0.4c3.6-0.1,7.1-0.1,10.7-0.1c4.8,0.1,9.7,0.2,14.5,0.3
		c2.6,0.1,5.2,0.2,7.8,0.3c4.5,0.2,8.9,0.5,13.4,0.8c4.3,0.3,8.7,0.8,13,1.1c3,0.3,6.1,0.5,9.1,0.8c3.3,0.3,6.6,0.6,9.9,1
		c0.4,0,0.8,0.2,1.1,0.4c0.6,0.3,0.8,0.9,0.7,1.5c-0.1,0.7-0.4,1.2-1,1.4c-0.4,0.2-0.9,0.2-1.4,0.2
		C324.1,326.7,321.3,326.6,318.5,326.4C318.5,326.5,318.5,326.4,318.5,326.4z"/>
	<g>
		<path class="st1" d="M320.6,163.6c0,1.8-0.6,3.4-1.4,4.9c-1.9,3.5-4.6,6.3-8.1,8.1c-3.2,1.7-6.4,3.4-9.8,4.7
			c-2.3,0.9-4.8,1.2-7.2,1.8c-0.8,0.2-1.5-0.1-2-0.8c-0.5-0.7-0.5-1.5-0.1-2.3c0.7-1.1,1.4-2.2,2.3-3.2c2.1-2.6,4.1-5.2,6.4-7.6
			c3-3.3,6.4-6.2,10.2-8.6c1.1-0.7,2.3-1.2,3.5-1.6C317.9,157.9,320.6,159.9,320.6,163.6z"/>
		<path class="st1" d="M294.9,186.5c6.1,0.3,11.5,2,15.9,6c1.9,1.7,3.2,3.9,3,6.6c-0.1,1.7-1,3-2.7,3.6c-2,0.7-4.1,0.8-6.1,0
			c-1.4-0.6-2.9-1.2-4.3-1.8c-2.1-0.9-3.9-2.4-5.3-4.1c-1.6-1.8-3-3.8-4.1-6c-1.3-2.5,0.1-3.6,2.2-4.2
			C294.1,186.5,294.7,186.6,294.9,186.5z"/>
	</g>
	<g>
		<path class="st1" d="M93.3,163.5c0.1-2.3,1.4-4.1,3.3-4.7c1.1-0.3,2.1-0.1,3.2,0.2c2.5,0.9,4.7,2.4,6.8,4
			c4.4,3.4,8.2,7.5,11.7,11.8c1.1,1.4,2.1,2.8,3.1,4.2c0.3,0.4,0.5,0.9,0.7,1.4c0.5,1.4-0.8,2.9-2.1,2.6c-1.4-0.3-2.8-0.6-4.2-0.9
			c-3.3-0.7-6.3-2.3-9.3-3.8c-2.1-1.1-4.2-2.1-6.1-3.5c-3.1-2.3-5.4-5.3-6.6-9C93.5,165.2,93.4,164.3,93.3,163.5z"/>
		<path class="st1" d="M119.2,186.5c0.8-0.1,1.8,0.1,2.7,0.7c1.2,0.8,1.5,1.7,0.9,3c-0.9,1.9-2.1,3.7-3.4,5.4
			c-2.5,3.3-5.8,5.5-9.7,6.8c-1.5,0.5-2.9,1.1-4.5,0.8c-0.9-0.1-1.8-0.3-2.7-0.6c-1.3-0.5-2.1-1.5-2.4-2.9c-0.2-1.1-0.1-2.3,0.4-3.4
			c0.9-2.2,2.4-3.9,4.3-5.2C109,188.2,113.8,186.8,119.2,186.5z"/>
	</g>
</g>
</svg>
`;

loadImage = function(img) {
  var root = document.getElementById('root');
  var svg = '';

  if (img === 1) {
    svg = img1;
  } else {
    svg = img2;
  }

  var vb = VB_REGEX.exec(svg);

  if (!vb) {
    window.setTimeout(function() {
      window.loadImage(img);
    }, 0);

    return;
  }

  document.getElementsByClassName('viewbox')[0].innerText =
    `{ x: ${vb[1]}, y: ${vb[2]}, width: ${vb[3]}, height: ${vb[4]} }`;

  root.innerHTML = svg;
}
＆＃13; 
body {
  padding: 15px;
}

.canvas {
  background-color: #fff;
  height: 475px;
  width: 655px;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  max-width: 80%;
  height: 80%;
}

.actions {
  margin-top: 15px;
}
＆＃13; 
<div id="root" class="canvas">
</div>
<div class="actions">
  <button onclick="window.loadImage(1);">Load Image 1</button>
  <button onclick="window.loadImage(2);">Load Image 2</button>
  <strong>ViewBox:</strong>
  <span class="viewbox"></span>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您的alignImage()功能会像这样工作：

alignImage = function() {
  var svg = document.getElementById('__root_svg__');
  // reference the inserted SVG element
  var innerSvg = svg.getElementById('__root_group__').firstElementChild;

  var sr = svg.getBoundingClientRect();
  //extract the vieBox values - note the more robust RegEx
  var vb = innerSvg.getAttribute('viewBox').split(/[,\s]+/);

  // do not overwrite existing width/height values
  var width = innerSvg.hasAttribute('width') ? innerSvg.getAttribute('width') : vb[2];
  var height = innerSvg.hasAttribute('height') ? innerSvg.getAttribute('height') : vb[3];

  var x = (sr.width - width) / 2;
  var y = (sr.height - height) / 2;

  innerSvg.setAttribute('x', x);
  innerSvg.setAttribute('y', y);
  innerSvg.setAttribute('width', width);
  innerSvg.setAttribute('height', height);
}

虽然这没有提供内部SVG大于外部的情况。

相关问题
最新问题