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

Question

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

这就是 WebStorm 显示图片的方式

所以浏览器

如何解决这个问题？

这是我写的代码。

<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>

标签： imagesvgvectorfrontendvector-graphics

Answer 1

WebStorm 中的渲染是错误的。

您的 SVG 存在三个问题：

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

在下面的代码片段中，我<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>

然而，更理想的解决方案是解决子元素的viewBox、 大小和位置问题。<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>