flex div容器内的内联SVG（可能有百分比大小）答案

【问题标题】：Inline SVG inside flex div container (which may have percentage size)flex div容器内的内联SVG（可能有百分比大小）
【发布时间】：2019-08-23 10:15:08
【问题描述】：

我有三个 flex 列，每个列都有相对于页面本身的大小（宽度 7%，高度 60%）。每列包含三个弹性项目（116px x 140px），带有 justify-content: space-between; align-items: center;，所以它们是居中的。

在每个 flex 项内部都有一个包含图像 (116px x 140px) 的 SVG，因为我想对这些图像应用一些过滤器（除其他外）。

我希望整个页面都具有响应性——不仅是 flex 列，还有 SVG。我尝试将这些 SVG 的宽度和高度分别设置为 100%，但（显然）没有用。我知道我应该使用 viewBox。 min-x 和 min-y 将为 0（无平移/偏移）但宽度和高度应该具有什么值？

我有另一列 - 与其他列相同（宽 7%，高 60%）。它包含一个单一的 SVG，其中有一个用于在其上流动渐变的路径。如何使这个 SVG（路径）也响应？ viewBox 应该是解决方案，但又一次：宽度和高度应该有什么值？我知道它们的值不能是百分比，而是像素 - 同样，列容器具有百分比大小。

我不想为此使用 CSS（据我所知，在这种情况下使用它很麻烦，而且我不希望我的代码有一个简单而干净的流程）。所以所有的 SVG 动画都是使用 Tweenmax 管理的。

【问题讨论】：

你能添加你的代码吗

标签： svg flexbox responsive

【解决方案1】：

这是我的原始代码（对 SVG 使用 100% 的宽度和高度，这是错误的）

:root {
    --flexColumnPosTop: 10%;
}

.flex-container {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}

.flex-container-column {
    position: absolute;
    /* background-color: cyan; */
    top: calc(var(--flexColumnPosTop) * 2);       
    width: 7%;
    height: 60%;
}

.flex-container-column-posleft{
    left: var(--flexColumnPos); 
}

.divImagePNG {
    width: 116px;
    height: 110px;
}

<svg>
<defs>

<linearGradient id="linearGradient" x1="0" y1="0" x2="100%" y2="0" spreadMethod="pad" gradientUnits="userSpaceOnUse">
    <stop id="offset_start" offset="0" stop-color="rgb(249, 59, 120)" stop-opacity="1" />  
    <stop id="offset_mid" offset="0" stop-color="rgb(250, 250, 250)" stop-opacity="1" />
    <stop id="offset_end" offset="0" stop-color="rgb(116, 161, 230)" stop-opacity="1"/>
</linearGradient>

<path id="gradientPath" d="M20 70 h18 v85 h19" fill="none" stroke="rgb(116, 161, 230)" stroke-width="5" stroke-dasharray="122" stroke-dashoffset="0" />

<pattern id="patternImagePNG" patternUnits="userSpaceOnUse" width="116px" height="110px">
    <image id="imagePNG" preserveAspectRatio="none" href="image.png"  width="116px" height="110px"></image>
</pattern>

<rect id="rectImagePNG" x="0" y="0" width="116px" height="110px" fill="url(#patternImagePNG)" stroke-width="5" stroke="rgb(201, 28, 240)"
    stroke-dasharray="452" stroke-dashoffset="0" fill-opacity="1" /> 
</defs>
</svg>

<div class="flex-container flex-container-column flex-container-column-posleft">
    <div class="divImagePNG">
        <svg width="100%" height="100%"> 
            <use href="#rectImagePNG"></use>
        </svg>
    </div>

    <div class="divImagePNG">
        <svg width="100%" height="100%"> 
            <use href="#rectImagePNG"></use>
        </svg>
    </div>

    <div class="divImagePNG">
        <svg width="100%" height="100%"> 
            <use href="#rectImagePNG"></use>
        </svg>
    </div>
</div>


<div class="flex-container flex-container-column flex-container-column-pospathleft">
    <svg width="100%" height="100%">
        <use href="#gradientPath"></use>      
    </svg>
</div>

【讨论】：