如何将一个svg放入另一个svg？

Question

我正在尝试将一个 svg 放在另一个中，但是在浏览器和代码编辑器中的显示不同，我无法弄清楚问题所在。

This is how WebStorm displays the picture

And so the browser

如何解决这个问题？

这是我写的代码。

<svg width="33" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
    <circle cx="16.5" cy="16" r="12" fill="#E62117"/>
</g>
<g>
    <svg width="15" height="15" viewBox="-15 -20 20 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4502 6.1949C11.4502 5.61656 11.9326 5.20233 12.5083 5.20233C13.0839 5.20233 13.5664 5.61656 13.5664 6.1949V11.3929C13.5664 11.9713 13.0839 12.3855 12.5083 12.3855C11.9326 12.3855 11.4502 11.9713 11.4502 11.3929V6.1949ZM11.4502 14.8268C11.4502 14.2591 11.9442 13.8342 12.5083 13.8342C13.0723 13.8342 13.5664 14.2591 13.5664 14.8268C13.5664 15.3944 13.0723 15.8193 12.5083 15.8193C11.9442 15.8193 11.4502 15.3944 11.4502 14.8268Z" fill="#fff"/>
        <path d="M22.259 20H2.75761C1.76099 20 0.845177 19.5297 0.360333 18.7129C-0.124509 17.9208 -0.124509 16.9554 0.387269 16.1634L10.138 1.23762C10.6498 0.470296 11.5117 0 12.5083 0C13.5049 0 14.3669 0.470296 14.8787 1.23762L24.6024 16.1634C25.1142 16.9554 25.1411 17.9208 24.6294 18.7129C24.1445 19.505 23.2556 20 22.259 20ZM12.5083 1.48515C12.1043 1.48515 11.7541 1.65842 11.5386 2.00495L1.78792 16.9307C1.57244 17.2525 1.57244 17.6485 1.76099 17.995C1.94954 18.3416 2.32664 18.5149 2.75761 18.5149H22.2321C22.6361 18.5149 23.0132 18.3168 23.2287 17.995C23.4442 17.6733 23.4173 17.2772 23.2018 16.9307L13.478 2.00495C13.2625 1.68317 12.9124 1.48515 12.5083 1.48515Z" fill="#fff"/>
    </svg>
</g>

<defs>
    <filter id="filter0_dd" x="0.5" y="0" width="32" height="32" filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect2_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
        <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
    </filter>
</defs>
</svg>

Answer 1

WebStorm 中的渲染是错误的。

您的 SVG 存在三个问题：

• 子 <svg> 未放置在正确的位置
• viewBox 属性仅涵盖符号的一部分。因此，您的孩子 SVG（符号）的一部分是不可见的。那是因为：
• overflow 属性的默认值是 "hidden" 用于子 <svg> 元素。所以内容会被裁剪到width和height所描述的区域。

在下面的 sn-p 中，我用绿色矩形标记了子 <svg> 的边界。

body > svg {
  width: 400px;
  height: 100%;
}

<svg width="33" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
    <circle cx="16.5" cy="16" r="12" fill="#E62117"/>
</g>
<rect x="0" y="0" width="15" height="15" fill="none" stroke="green" stroke-width="0.2"/>
<g>
    <svg width="15" height="15" viewBox="-15 -20 20 30" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4502 6.1949C11.4502 5.61656 11.9326 5.20233 12.5083 5.20233C13.0839 5.20233 13.5664 5.61656 13.5664 6.1949V11.3929C13.5664 11.9713 13.0839 12.3855 12.5083 12.3855C11.9326 12.3855 11.4502 11.9713 11.4502 11.3929V6.1949ZM11.4502 14.8268C11.4502 14.2591 11.9442 13.8342 12.5083 13.8342C13.0723 13.8342 13.5664 14.2591 13.5664 14.8268C13.5664 15.3944 13.0723 15.8193 12.5083 15.8193C11.9442 15.8193 11.4502 15.3944 11.4502 14.8268Z" fill="#fff"/>
        <path d="M22.259 20H2.75761C1.76099 20 0.845177 19.5297 0.360333 18.7129C-0.124509 17.9208 -0.124509 16.9554 0.387269 16.1634L10.138 1.23762C10.6498 0.470296 11.5117 0 12.5083 0C13.5049 0 14.3669 0.470296 14.8787 1.23762L24.6024 16.1634C25.1142 16.9554 25.1411 17.9208 24.6294 18.7129C24.1445 19.505 23.2556 20 22.259 20ZM12.5083 1.48515C12.1043 1.48515 11.7541 1.65842 11.5386 2.00495L1.78792 16.9307C1.57244 17.2525 1.57244 17.6485 1.76099 17.995C1.94954 18.3416 2.32664 18.5149 2.75761 18.5149H22.2321C22.6361 18.5149 23.0132 18.3168 23.2287 17.995C23.4442 17.6733 23.4173 17.2772 23.2018 16.9307L13.478 2.00495C13.2625 1.68317 12.9124 1.48515 12.5083 1.48515Z" fill="#fff"/>
    </svg>
</g>
</svg>

解决此问题的一种方法是将overflow="visible" 添加到子<svg> 元素中。

body > svg {
  width: 400px;
  height: 100%;
}

<svg width="33" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
    <circle cx="16.5" cy="16" r="12" fill="#E62117"/>
</g>
<g>
    <svg width="15" height="15" viewBox="-15 -20 20 30" fill="none" overflow="visible">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4502 6.1949C11.4502 5.61656 11.9326 5.20233 12.5083 5.20233C13.0839 5.20233 13.5664 5.61656 13.5664 6.1949V11.3929C13.5664 11.9713 13.0839 12.3855 12.5083 12.3855C11.9326 12.3855 11.4502 11.9713 11.4502 11.3929V6.1949ZM11.4502 14.8268C11.4502 14.2591 11.9442 13.8342 12.5083 13.8342C13.0723 13.8342 13.5664 14.2591 13.5664 14.8268C13.5664 15.3944 13.0723 15.8193 12.5083 15.8193C11.9442 15.8193 11.4502 15.3944 11.4502 14.8268Z" fill="#fff"/>
        <path d="M22.259 20H2.75761C1.76099 20 0.845177 19.5297 0.360333 18.7129C-0.124509 17.9208 -0.124509 16.9554 0.387269 16.1634L10.138 1.23762C10.6498 0.470296 11.5117 0 12.5083 0C13.5049 0 14.3669 0.470296 14.8787 1.23762L24.6024 16.1634C25.1142 16.9554 25.1411 17.9208 24.6294 18.7129C24.1445 19.505 23.2556 20 22.259 20ZM12.5083 1.48515C12.1043 1.48515 11.7541 1.65842 11.5386 2.00495L1.78792 16.9307C1.57244 17.2525 1.57244 17.6485 1.76099 17.995C1.94954 18.3416 2.32664 18.5149 2.75761 18.5149H22.2321C22.6361 18.5149 23.0132 18.3168 23.2287 17.995C23.4442 17.6733 23.4173 17.2772 23.2018 16.9307L13.478 2.00495C13.2625 1.68317 12.9124 1.48515 12.5083 1.48515Z" fill="#fff"/>
    </svg>
</g>

<defs>
    <filter id="filter0_dd" x="0.5" y="0" width="32" height="32" filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect2_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
        <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
    </filter>
</defs>
</svg>

然而，更理想的解决方案是解决子 <svg> 元素的viewBox、大小和位置问题。

body > svg {
  width: 400px;
  height: 100%;
}

<svg width="33" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
    <circle cx="16.5" cy="16" r="12" fill="#E62117"/>
</g>
<g>
    <svg x="10" y="10" width="12.5" height="12.5" viewBox="0 0 25 25" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4502 6.1949C11.4502 5.61656 11.9326 5.20233 12.5083 5.20233C13.0839 5.20233 13.5664 5.61656 13.5664 6.1949V11.3929C13.5664 11.9713 13.0839 12.3855 12.5083 12.3855C11.9326 12.3855 11.4502 11.9713 11.4502 11.3929V6.1949ZM11.4502 14.8268C11.4502 14.2591 11.9442 13.8342 12.5083 13.8342C13.0723 13.8342 13.5664 14.2591 13.5664 14.8268C13.5664 15.3944 13.0723 15.8193 12.5083 15.8193C11.9442 15.8193 11.4502 15.3944 11.4502 14.8268Z" fill="#fff"/>
        <path d="M22.259 20H2.75761C1.76099 20 0.845177 19.5297 0.360333 18.7129C-0.124509 17.9208 -0.124509 16.9554 0.387269 16.1634L10.138 1.23762C10.6498 0.470296 11.5117 0 12.5083 0C13.5049 0 14.3669 0.470296 14.8787 1.23762L24.6024 16.1634C25.1142 16.9554 25.1411 17.9208 24.6294 18.7129C24.1445 19.505 23.2556 20 22.259 20ZM12.5083 1.48515C12.1043 1.48515 11.7541 1.65842 11.5386 2.00495L1.78792 16.9307C1.57244 17.2525 1.57244 17.6485 1.76099 17.995C1.94954 18.3416 2.32664 18.5149 2.75761 18.5149H22.2321C22.6361 18.5149 23.0132 18.3168 23.2287 17.995C23.4442 17.6733 23.4173 17.2772 23.2018 16.9307L13.478 2.00495C13.2625 1.68317 12.9124 1.48515 12.5083 1.48515Z" fill="#fff"/>
    </svg>
</g>

<defs>
    <filter id="filter0_dd" x="0.5" y="0" width="32" height="32" filterUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
        <feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect2_dropShadow"/>
        <feOffset/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.98039 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
        <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
    </filter>
</defs>
</svg>