如何将一个 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 存在三个问题：

child <svg> 没有放置在正确的位置
viewBox 属性仅涵盖符号的一部分。因此，您的 child SVG（符号）的一部分不可见。那是因为：
overflow 属性的默认值为 child <svg> 元素的 "hidden"。因此内容将被裁剪到 width 和 height.

在下面的代码片段中，我用绿色矩形标记了 child <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" 添加到 child <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>

然而，更理想的解决方案是解决 viewBox、child <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 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>

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

How to put one svg in another?

image

svg

vector

frontend

vector-graphics