css - SVG响应曲线线

Question

我尝试将 svg 线与 svg 图标居中，该线应该穿过 svg 图标，但不与它们重叠。如何让它响应，取决于容器的宽度。是否有任何解决方案， Canvas 或伪类之后。线条和图标应该居中，即使我向这个 block 添加了额外的内容。 codepen

<div class="wrapper text-center">

  <svg class="red svg-1 svg-2" width=100% height=100% >
       <path  d="M 50 0 l 0 27 q 0 50 50 50 l 1000 0 q 50 0 50 50 l 0 50" stroke="#d4d4d4" stroke-width="1" fill="none" />
    </svg>
  <div class="row">        

    <div class="columns medium-4"><svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="75.001px" height="75px" viewBox="0 0 75.001 75"
        enable-background="new 0 0 75.001 75" xml:space="preserve">
<switch>
    <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
        <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
        </i:pgfRef>
    </foreignObject>
    <g i:extraneous="self">
        <g>
            <path fill="#FFD100" d="M64.017,10.984C56.934,3.9,47.517,0,37.5,0S18.067,3.901,10.984,10.984S0,27.484,0,37.5
                c0,10.017,3.901,19.433,10.984,26.517C18.067,71.1,27.483,75,37.5,75s19.434-3.9,26.517-10.982
                c7.083-7.084,10.984-16.5,10.984-26.517C75.001,27.484,71.1,18.067,64.017,10.984z M72.001,37.5c0,2.656-0.308,5.264-0.889,7.791
                l-6.286-7.793l6.278-7.823C71.69,32.212,72.001,34.832,72.001,37.5z M13.105,13.105C19.622,6.588,28.285,3,37.5,3
                s17.879,3.588,24.396,10.105c3.739,3.739,6.509,8.188,8.195,13.04l-7.043,8.775c-5.706-8.429-15.305-13.585-25.547-13.585
                S17.66,26.491,11.954,34.92L4.91,26.144C6.597,21.292,9.366,16.844,13.105,13.105z M61.151,37.5
                c-5.063,8.144-14.045,13.166-23.65,13.166S18.914,45.645,13.851,37.5c5.063-8.144,14.045-13.166,23.65-13.166
                S56.088,29.357,61.151,37.5z M3,37.5c0-2.669,0.311-5.289,0.896-7.827l6.279,7.824l-6.287,7.795C3.308,42.766,3,40.157,3,37.5z
                 M61.896,61.896C55.379,68.412,46.715,72,37.5,72s-17.878-3.588-24.395-10.104c-3.749-3.75-6.522-8.211-8.208-13.078l7.053-8.742
                c5.706,8.432,15.307,13.59,25.551,13.59s19.845-5.158,25.551-13.59l7.052,8.742C68.419,53.685,65.645,58.146,61.896,61.896z"/>
            <path fill="#FFD100" d="M37.501,26.833c-5.882,0-10.667,4.785-10.667,10.667c0,5.881,4.785,10.666,10.667,10.666
                c5.881,0,10.666-4.784,10.666-10.666C48.167,31.619,43.382,26.833,37.501,26.833z M37.501,45.166
                c-4.228,0-7.667-3.438-7.667-7.666c0-4.228,3.439-7.667,7.667-7.667s7.666,3.439,7.666,7.667
                C45.167,41.728,41.729,45.166,37.501,45.166z"/>
            <path fill="#FFD100" d="M37.501,34.583c-1.608,0-2.917,1.309-2.917,2.917c0,1.608,1.309,2.916,2.917,2.916
                c1.607,0,2.916-1.308,2.916-2.916C40.417,35.892,39.108,34.583,37.501,34.583z"/>


        </g>
    </g>
</switch>
</svg></div>

    <div class="columns medium-4"><svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74.983px" height="75.001px" viewBox="0 0 74.983 75.001"
        enable-background="new 0 0 74.983 75.001" xml:space="preserve">
<switch>
    <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
        <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
        </i:pgfRef>
    </foreignObject>
    <g i:extraneous="self">
        <g>
            <path fill="#FFD100" d="M37.5,75.001c-10.017,0-19.433-3.9-26.516-10.983S0,47.518,0,37.501s3.901-19.434,10.984-26.517
                S27.483,0,37.5,0c10.016,0,19.434,3.901,26.516,10.984c14.621,14.621,14.621,38.412,0,53.033
                C56.934,71.101,47.516,75.001,37.5,75.001z M37.5,3c-9.215,0-17.878,3.589-24.395,10.105c-13.451,13.452-13.451,35.339,0,48.791
                c6.517,6.516,15.18,10.104,24.395,10.104c9.215,0,17.879-3.589,24.395-10.104C68.413,55.38,72,46.716,72,37.501
                s-3.588-17.879-10.105-24.396C55.379,6.589,46.715,3,37.5,3z"/>
            <path fill="#FFD100" d="M37.501,53.667c-10.964,0-21.194-5.906-26.697-15.415c-0.27-0.465-0.27-1.037,0-1.502
                c5.503-9.509,15.733-15.415,26.697-15.415c10.964,0,21.195,5.906,26.697,15.415c0.27,0.465,0.27,1.037,0,1.502
                C58.696,47.761,48.465,53.667,37.501,53.667z M13.851,37.501c5.063,8.144,14.045,13.166,23.65,13.166
                c9.605,0,18.587-5.022,23.65-13.166c-5.062-8.144-14.045-13.166-23.65-13.166C27.896,24.335,18.914,29.357,13.851,37.501z"/>
            <path fill="#FFD100" d="M37.501,48.167c-5.882,0-10.667-4.785-10.667-10.666c0-5.882,4.785-10.667,10.667-10.667
                c5.88,0,10.666,4.785,10.666,10.667C48.167,43.382,43.381,48.167,37.501,48.167z M37.501,29.834
                c-4.228,0-7.667,3.439-7.667,7.667s3.439,7.666,7.667,7.666c4.228,0,7.666-3.438,7.666-7.666S41.729,29.834,37.501,29.834z"/>
            <path fill="#FFD100" d="M37.501,40.417c-1.608,0-2.917-1.309-2.917-2.916c0-1.608,1.309-2.917,2.917-2.917
                c1.607,0,2.916,1.309,2.916,2.917C40.417,39.108,39.108,40.417,37.501,40.417z"/>



        </g>
    </g>
</switch>
</svg></div>
    <div class="columns medium-4">
      <svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74.963px" height="75px" viewBox="0 0 74.963 75" enable-background="new 0 0 74.963 75"
        xml:space="preserve">
<switch>
    <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
        <i:pgfRef  xlink:href="#adobe_illustrator_pgf">
        </i:pgfRef>
    </foreignObject>
    <g i:extraneous="self">
        <g>
            <path fill="#FFD100" d="M63.998,10.984C56.914,3.9,47.497,0,37.48,0S18.048,3.901,10.965,10.984
                c-14.62,14.621-14.62,38.412,0,53.033C18.048,71.1,27.464,75,37.48,75s19.434-3.9,26.518-10.983
                C78.618,49.396,78.618,25.605,63.998,10.984z M61.877,61.896C55.36,68.412,46.696,72,37.48,72
                c-9.215,0-17.878-3.589-24.395-10.104c-13.45-13.451-13.45-35.339,0-48.791C19.603,6.588,28.266,3,37.48,3
                c9.216,0,17.88,3.588,24.396,10.105C75.327,26.557,75.327,48.445,61.877,61.896z"/>
            <path fill="#FFD100" d="M34.736,37.307H17.043c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5h17.693
                c0.828,0,1.5-0.671,1.5-1.5V38.806C36.236,37.978,35.564,37.307,34.736,37.307z M33.236,55H18.543V40.306h14.693V55z"/>
            <path fill="#FFD100" d="M57.92,37.307H40.227c-0.828,0-1.5,0.671-1.5,1.5V56.5c0,0.829,0.672,1.5,1.5,1.5H57.92
                c0.828,0,1.5-0.671,1.5-1.5V38.806C59.42,37.978,58.748,37.307,57.92,37.307z M56.42,55H41.727V40.306H56.42V55z"/>
            <path fill="#FFD100" d="M47.828,33.667V15.974c0-0.829-0.672-1.5-1.5-1.5H28.635c-0.828,0-1.5,0.671-1.5,1.5v17.693                c0,0.829,0.672,1.5,1.5,1.5h17.693C47.156,35.167,47.828,34.496,47.828,33.667z M44.828,32.167H30.135V17.474h14.693V32.167z"/>

        </g>
    </g>
  </switch>
  </svg></div>

     <!-- LINES Це тимчасово так зліва направо однією лінією, потрібно буде дві лінії з центра вліво і друга з центра вправо-->
<!--     <svg class="red svg-1 svg-2" width=100% height=100% >
       <path  d="M 50 0 l 0 27 q 0 50 50 50 l 1000 0 q 50 0 50 50 l 0 50" stroke="#d4d4d4" stroke-width="1" fill="none" />
    </svg> -->
    <!-- END LINES -->
  </div>
</div>

Answer 1

给你Codepen

想法:

1) 使用线图作为background-image

2) 使用 background-size: 100% 177px 100% 会将图像拉伸(stretch)得过满，177px 是图像的原始高度。