Question

我正在尝试将iron-icon内的图标与边框对齐。边框是一个有填充的圆圈，我希望我的svg在中间。我修复了它，但是将svg 5 px向右移动似乎很骇人。

SVG路径是问题的原因。它略微偏移并与顶部对齐，并且不会缩放到铁图标的大小。

如果我使用iron-icon默认图标，则不会出现此问题。

元素：

<style>
        iron-icon {
            --iron-icon-height: 48px;
            --iron-icon-width: 48px;
            border: 10px solid #fff;
            border-radius: 50%;
            background-color: var(--dark-theme-base-color);
            box-shadow: 0 0 0 1px var(--dark-theme-base-color);
            --iron-icon-fill-color: var(--dark-theme-text-color);
        }

        #HACKY FIX
        iron-icon ::content > .style-scope {
            margin-left: 5px;
        }
</style>

<iron-icon class="circled-logo" icon="logo-icons:browse-and-buy"></iron-icon>

图标集：

<iron-iconset-svg name="logo-icons" size="100">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100"
    xml:space="preserve">
    <defs>
        <g id="browse-and-buy" transform="scale(3.0)">
            <path d="M13,5c-0.6,0-1,0.4-1,1v4.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0
                c-0.4,0.4-0.4,1,0,1.4l6.3,6.3H6c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h7c0.6,0,1-0.5,1-1V6C14,5.4,13.5,5,13,5z M25.7,24.3L19.4,18
                H24c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1h-7c-0.6,0-1,0.5-1,1v7c0,0.6,0.4,1,1,1s1-0.4,1-1v-4.6l6.3,6.3c0.4,0.4,1,0.4,1.4,0
                C26.1,25.3,26.1,24.7,25.7,24.3z"/>
        </g>

    </defs>
</svg>

将铁图标与边框对齐

0 个答案: