堆叠SVG组并水平对齐

时间:2018-07-04 02:38:54

标签: css svg

我正在尝试将两个SVG基本上合并为一个。第一个SVG是标记/图钉,第二个是我想水平居中的图标。

<svg width="44px" height="49px" viewBox="0 0 44 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    id="marker-only">
    <defs>
        <filter x="-40.0%" y="-300.0%" width="180.0%" height="700.0%" filterUnits="objectBoundingBox" id="shadow-filter">
            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
        </filter>
    </defs>
    <g id="pin" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="pin-only" transform="translate(7.000000, 0.000000)">
            <path d="M15,0 C6.4484129,0 0,6.75894194 0,15.7258065 C0,27.006 13.9436903,37.1663226 14.5373613,37.5925161 C14.6747419,37.6931613 14.8389484,37.7419355 15,37.7419355 C15.1610516,37.7419355 15.3252581,37.6931613 15.4626387,37.5925161 C16.0547419,37.1663226 30,27.006 30,15.7258065 C30,6.76052903 23.5515484,0 15,0 Z"
                id="Vector" fill="#006893" fill-rule="nonzero"></path>
            <ellipse id="shadow" fill-opacity="0.4" fill="#656565" filter="url(#shadow-filter)" cx="15" cy="38" rx="15" ry="2"></ellipse>
            <g id="icon" fill="#fff" transform="scale(1)" width="20px">
                <g>
                    <path d="M17.496,11c-3.584,0-6.5,2.916-6.5,6.5s2.916,6.5,6.5,6.5s6.5-2.916,6.5-6.5S21.08,11,17.496,11z M21.138,16.2
        l-3.817,4.185c-0.092,0.1-0.221,0.159-0.357,0.162c-0.004,0-0.008,0-0.012,0c-0.133,0-0.26-0.053-0.354-0.146l-2.729-2.727
        c-0.195-0.194-0.195-0.512,0-0.707c0.195-0.195,0.512-0.195,0.707,0l2.358,2.356l3.465-3.797c0.186-0.204,0.503-0.22,0.706-0.032
        C21.31,15.68,21.324,15.996,21.138,16.2z" />
                    <g>
                        <rect x="4" y="13" width="1" height="3" />
                        <rect x="6" y="8" width="1" height="8" />
                        <rect x="8" y="11" width="1" height="5" />
                        <path d="M10.016,17.465c0-3.961,3.089-7.207,6.984-7.474V5.5c0-0.133-0.053-0.26-0.146-0.353l-5-5C11.76,0.053,11.633,0,11.5,0
            h-11C0.225,0,0,0.224,0,0.5v21C0,21.776,0.225,22,0.5,22h11.056C10.594,20.738,10.016,19.17,10.016,17.465z M11,1l5,5h-5V1z
             M10,16.5c0,0.276-0.224,0.5-0.5,0.5h-7C2.224,17,2,16.776,2,16.5S2.224,16,2.5,16H3v-3.5C3,12.224,3.224,12,3.5,12H5V7.5
            C5,7.224,5.224,7,5.5,7h2C7.776,7,8,7.224,8,7.5V10h1.5c0.276,0,0.5,0.224,0.5,0.5V16.5z" />
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

看起来像这样(使用此online tool测试):

enter image description here

如何将#icon居中以始终保持水平居中?

0 个答案:

没有答案