Question

我似乎无法将instagram徽标定位在六边形的中心。 https://jsfiddle.net/0kx4t7bw/

<svg class="icon-hover" height="67px" id="Layer_1" style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="67px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M44.271,26.578v-0.006c0.502,0,1.005,0.01,1.508-0.002  c0.646-0.017,1.172-0.57,1.172-1.217c0-0.964,0-1.927,0-2.891c0-0.69-0.547-1.24-1.236-1.24c-0.961-0.001-1.922-0.001-2.883,0  c-0.688,0.001-1.236,0.552-1.236,1.242c-0.001,0.955-0.004,1.91,0.003,2.865c0.001,0.143,0.028,0.291,0.073,0.426  c0.173,0.508,0.639,0.82,1.209,0.822C43.344,26.579,43.808,26.578,44.271,26.578z M35,27.817c-3.384-0.002-6.135,2.721-6.182,6.089  c-0.049,3.459,2.72,6.201,6.04,6.272c3.454,0.074,6.248-2.686,6.321-6.042C41.254,30.675,38.462,27.815,35,27.817z M23.046,31.116  v0.082c0,4.515-0.001,9.03,0,13.545c0,0.649,0.562,1.208,1.212,1.208c7.16,0.001,14.319,0.001,21.479,0  c0.656,0,1.215-0.558,1.215-1.212c0.001-4.51,0-9.019,0-13.528v-0.094h-2.912c0.411,1.314,0.537,2.651,0.376,4.014  c-0.161,1.363-0.601,2.632-1.316,3.803c-0.716,1.173-1.644,2.145-2.779,2.917c-2.944,2.006-6.821,2.183-9.946,0.429  c-1.579-0.886-2.819-2.121-3.685-3.712c-1.289-2.374-1.495-4.866-0.739-7.452C24.983,31.116,24.021,31.116,23.046,31.116z   M47.205,49.255c0.159-0.026,0.318-0.049,0.475-0.083c1.246-0.265,2.264-1.304,2.508-2.557c0.025-0.136,0.045-0.273,0.067-0.409  V21.794c-0.021-0.134-0.04-0.268-0.065-0.4c-0.268-1.368-1.396-2.429-2.78-2.618c-0.058-0.008-0.113-0.021-0.17-0.03H22.761  c-0.147,0.026-0.296,0.047-0.441,0.079c-1.352,0.309-2.352,1.397-2.545,2.767c-0.008,0.057-0.02,0.113-0.029,0.171v24.478  c0.028,0.155,0.05,0.312,0.085,0.466c0.299,1.322,1.427,2.347,2.77,2.52c0.064,0.007,0.13,0.02,0.195,0.03H47.205z M33.5,1  l28.146,16.25v32.5L33.5,66L5.354,49.75v-32.5L33.5,1z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#D4D4D4;"/></svg>

Answer 1

这怎么样？ jsfiddle

    <?xml version="1.0" encoding="UTF-8"?>
    <svg class="icon-hover" height="67px" id="Layer_1" enable-background="new 0 0 67 67" version="1.1" viewBox="0 0 67 67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
    	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#D4D4D4;}
    </style>
    	<path class="st0" d="m33.5 1l-28.1 16.2v32.5l28.1 16.3 28.1-16.2v-32.6l-28.1-16.2zm15.3 45.2c0 0.1 0 0.3-0.1 0.4-0.2 1.3-1.3 2.3-2.5 2.6-0.2 0-0.3 0.1-0.5 0.1h-24.4-0.2c-1.3-0.2-2.5-1.2-2.8-2.5 0-0.2-0.1-0.3-0.1-0.5v-24.5-0.2c0.2-1.4 1.2-2.5 2.5-2.8 0.1 0 0.3-0.1 0.4-0.1h24.5 0.2c1.4 0.2 2.5 1.2 2.8 2.6 0 0.1 0 0.3 0.1 0.4v24.5z"/>
    	<path class="st0" d="m40.2 25.8c0.2 0.5 0.6 0.8 1.2 0.8h1.4 1.5c0.6 0 1.2-0.6 1.2-1.2v-2.9c0-0.7-0.5-1.2-1.2-1.2h-2.9c-0.7 0-1.2 0.6-1.2 1.2v2.9c-0.1 0.1-0.1 0.2 0 0.4z"/>
    	<path class="st0" d="m33.4 40.2c3.5 0.1 6.2-2.7 6.3-6 0.1-3.5-2.7-6.3-6.2-6.3-3.4 0-6.1 2.7-6.2 6.1 0 3.4 2.7 6.1 6.1 6.2z"/>
    	<path class="st0" d="m42.9 35.1c-0.2 1.4-0.6 2.6-1.3 3.8s-1.6 2.1-2.8 2.9c-2.9 2-6.8 2.2-9.9 0.4-1.6-0.9-2.8-2.1-3.7-3.7-1.3-2.4-1.5-4.9-0.7-7.5h-2.9v0.1 13.5c0 0.6 0.6 1.2 1.2 1.2h21.5c0.7 0 1.2-0.6 1.2-1.2v-13.5-0.1h-2.9c0.4 1.4 0.5 2.8 0.3 4.1z"/>
    </svg>

如何移动（居中）svg图标？

1 个答案: