Question

这是我的原始SVG之一：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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"
     viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
    <path class="st0" d="M34.2,19h-4l-0.6-2.5c-0.2-0.9-1-1.5-1.9-1.5h-3.9c-0.9,0-1.7,0.6-1.9,1.5L21.3,19h-4c-1.7,0-3,1.3-3,3v12
        c0,0.6,0.4,1,1,1h21c0.6,0,1-0.4,1-1V22C37.2,20.3,35.9,19,34.2,19z"/>
    <rect x="17.2" y="17" class="st0" width="2" height="2"/>
    <path class="st0" d="M27.2,19h-3c-0.6,0-1-0.4-1-1l0,0c0-0.6,0.4-1,1-1h3c0.6,0,1,0.4,1,1l0,0C28.2,18.6,27.8,19,27.2,19z"/>
    <circle class="st0" cx="25.7" cy="27.5" r="5.5"/>
    <circle class="st0" cx="25.7" cy="27.5" r="3.5"/>
    <circle class="st0" cx="34.2" cy="22" r="1"/>
    <path class="st0" d="M17.2,35V24c0-0.6-0.4-1-1-1h-2"/>
</g>
</svg>

在类似于Safari的浏览器中将其打开，图像会正确显示：

现在，我正在使用defs和symbol创建一个包含两个SVG的SVG-其中一个是我在上面显示的一个，另一个是类似的：

<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">
    <defs>
        <symbol viewBox="0 0 50 50" id="videographer">
            <style type="text/css">
                .st0{fill:none;stroke:#010101;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            </style>
            <g>
                <circle class="st0" cx="21" cy="19.5" r="2.5"/>
                <circle class="st0" cx="26" cy="19.5" r="2.5"/>
                <polyline class="st0" points="33.5,27.8 37.5,31 37.5,23 33.5,26.2   "/>
                <rect x="30.5" y="25" class="st0" width="3" height="4"/>
                <rect x="14.5" y="24" class="st0" width="2" height="6"/>
                <rect x="16.5" y="22" class="st0" width="14" height="10"/>
            </g>
        </symbol>
        <symbol viewBox="0 0 50 50" id="photographer">
            <style type="text/css">
                .st0{fill:none;stroke:#010101;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
            </style>
            <g>
                <path class="st0" d="M34.2,19h-4l-0.6-2.5c-0.2-0.9-1-1.5-1.9-1.5h-3.9c-0.9,0-1.7,0.6-1.9,1.5L21.3,19h-4c-1.7,0-3,1.3-3,3v12
        c0,0.6,0.4,1,1,1h21c0.6,0,1-0.4,1-1V22C37.2,20.3,35.9,19,34.2,19z"/>
                <rect x="17.2" y="17" class="st0" width="2" height="2"/>
                <path class="st0" d="M27.2,19h-3c-0.6,0-1-0.4-1-1l0,0c0-0.6,0.4-1,1-1h3c0.6,0,1,0.4,1,1l0,0C28.2,18.6,27.8,19,27.2,19z"/>
                <circle class="st0" cx="25.7" cy="27.5" r="5.5"/>
                <circle class="st0" cx="25.7" cy="27.5" r="3.5"/>
                <circle class="st0" cx="34.2" cy="22" r="1"/>
                <path class="st0" d="M17.2,35V24c0-0.6-0.4-1-1-1h-2"/>
            </g>
        </symbol>
    </defs>
</svg>

我的React代码来导入SVG并将其呈现...

import VendorIcons from '../../images/vendor_icons.svg';

const VendorIcon = props => {
    return (
        <svg version="1.1" id="Layer_1" x="0px" y="0px"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink">
            <use xlinkHref={`${VendorIcons}#${props.icon}`} />
        </svg>
    )
};

渲染代码：

<VendorIcon icon={"videographer"}/>

这就是它的呈现方式，没有样式：

为什么会这样？为什么风格会丢失？这个可以解决吗？

Answer 1

如果您将vendor_icons.svg中的样式更改为演示文稿属性，而不是样式标签中的CSS，它应该可以正常工作。看起来您正在使用Adobe Illustrator，因此您应该能够更改SVG导出设置来为您执行此操作。结果将是这样：

<symbol viewBox="0 0 50 50" id="videographer">
    <g>
        <circle fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" cx="21" cy="19.5" r="2.5"/>
        <circle fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" cx="26" cy="19.5" r="2.5"/>
        <polyline fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" points="33.5,27.8 37.5,31 37.5,23 33.5,26.2   "/>
        <rect x="30.5" y="25" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="3" height="4"/>
        <rect x="14.5" y="24" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="2" height="6"/>
        <rect x="16.5" y="22" fill="none" stroke="#010101" stroke-linecap="round" stroke-width="0.75" width="14" height="10"/>
    </g>
</symbol>

在编写组件时使用该组件的结果：

具有“ defs”的React + SVG-样式始终被忽略

1 个答案: