Question

我有3个flex列，每列都有相对于页面本身的相对大小（宽度7％，高度60％）。每列包含三个flex项（116像素x 140像素），其理由内容为： align-items：center ;，因此它们居中。

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

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

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

我不想为此使用CSS（据我所知，在这种情况下使用CSS是很麻烦的，我也不想让我的代码具有简单明了的流程）。因此，所有SVG动画都使用Tweenmax进行管理。

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

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

1 个答案: