css - 对 SVG 渐变和底层图像的不同响应？

Question

我需要在 svg 图像上放置一个透明渐变，使图像从中心到最右侧逐渐变为透明(垂直渐变)。

.

父元素有background-color: red;

问题是我需要渐变来响应父元素大小的变化(比如调整浏览器大小时)，同时保持其相对于父元素的比例，并继续淡化底层图像。

底层图像的行为必须类似于 CSS 中的 background-size: cover;。我发现 preserveAspectRatio="xMidYMid slice" 可以很好地实现这一点，但我不希望渐变以同样的方式表现。即使父元素的大小发生变化，它也必须始终占据父元素大小的相同百分比。如果 preserveAspectratio="none"、width="100%"、height="100%" 在渐变上，它可能会这样做。我已经尝试过了，但它不起作用。

我现在的方式是，当您水平调整浏览器窗口大小时，渐变变得越来越隐藏。在这里查看:CodePen .

我尝试将渐变分离到一个单独的 svg 中，认为它会建立一个新的视口(viewport)，允许我插入 preserveAspectratio="none" 这将拉伸(stretch)渐变以适应父元素的大小，但没有也工作。

这是另一种思考方式:CodePen .我想将顶部示例的背景行为与底部示例的渐变行为结合起来。

有什么想法吗？

Answer 1

您可以通过过滤器将彩色封面移动到 div 包装器中并完成您想要的。请注意，此特定实现不适用于 Firefox，因为它不支持 feImage 中的片段引用。您可以通过将我填充的矩形转换为 feImage(Firefox 支持)的自包含数据 URI/svg+xml 来使此 Firefox 兼容。

<div id="main" style="filter: url(#half-cover);">
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="361.42084mm" 
     height="74.083336mm" 
     viewBox="0 0 361.42083 74.083337" 
     preserveAspectRatio="xMidYMid slice"
     id="svg1">

  <defs>
    
   <linearGradient id="linearGradient33" gradientUnits="objectBoundingBox"  x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" id="stop1159" stop-color="red" stop-opacity="0"/>
      <stop offset="70%" id="stop1159" stop-color="red" stop-opacity="0"/>
      <stop offset="100%" id="stop1161" stop-color="red" stop-opacity="1"/>
    </linearGradient>
  
    <rect id="rectONE" x="0%" y="0%" width="100%" height="100%" fill="url(#linearGradient33)"/>
    
    <filter id="half-cover" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feImage x="0%" y="0%" width="100%" height="200%" xlink:href="#rectONE"/>
      <feComposite operator="over" in2="SourceGraphic"/>
    </filter>
  </defs>
  
  
  
  <image y="1.4210855e-014" 
         x="1.4210855e-014"
         preserveAspectRatio="none" 
         height="74.083336" 
         width="361.42084" 
         fill="#fff" 
         xlink:href="data:image/png;base64,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 +etisTg7XlWpSWd/hbmu61WN59RfL1+fx6HJ66AYu6Hzumyum97NP+Uayoaw/5n5+8p1uVi0599U VTrqjV2TUmoWi+6YVlWqe7XWdX15zUU9ef6bou523fTq73z/8uvnfVY5Lvl71h4C8hicsz5u6jrr n3c75gNz26+9Xa9DTWBvXeX3WJRNcvF+VV6jA3PbesK12j/HzvF8TsVe0p5b/3zL710sVt+3nM8m FXtr8fr8PVVKqarr1K/4srnP1//QPlKu6/Y6Wx7rvz5fa1VVtXPXuW7Lz0wpVeWaWL5Xe+5ptW7b PaUco+X4tL8vPrddCwNrJde7KD4nf+2oqtLR0dFq3eVxW/6+3S/z15eflfeQzv6civ1x4Pz7Y7fN ddm/R6eU0nyxSM1y38s1dN67t8fn66ozLk2zuk6KuVx9cNO+rrz/18tzn8/ny5f1eoW0uuflMW0W i7M1W9fpqDfXeR9bpLO5GRrDzjXW+1quv/+dTbnuBsays36K78/3xPL9O/1RMe7lWK1dt8Vn5Brq uj5bL8W5tNdt75ru3GtS6rz/ougXFkU9+dpZ5LVa12evy19ffn4es1x7/uz+tVXq7EfFtZPX3rn3 s/wZxTyW97S8xtr1kse795lHdb26R5/TX3Z62OV+N18sOtd2s/xfvRyneXkNLeupqyrVR0ft/T31 zq/s11JKnd6hvxd0ziOP7bLOutd3VFXV9qb5c+fzeVvX2j5UvK5ejk/7+cU9N49d+74buHScy3kr xyat9pp+v3NZz1P+2v/eoR5xbc9Jy7WfVn1fU1WpTmd7Zt7DjvJ1UIxjfx4uU9bRH4+8BvO6z9dJ 2d9kl10/F9ZQ7g9Nc7YnL/fbpmlSqutUF2OxyGPYNOno6Kj97LwW54tFOy51Va366tTrPXr7bbnu Os9ZRa9Qrvt2beb3KdbQ2jPmJWNTPtOV496/1vJr2v4ij0++lxd7dF4PdV23Y3iTOmtreU6LxaJz LGv3gLRaD6fL86yLucpz3PZfqbhfXXIN9N+/3wuX+8DQNd95fe9+W753Zw8tzq19vi33vOWfy/nr 72z5a02xDoZWUv94eZ0O9RXt/TePZXFttGu7dw/on2f5jLIon09T6sxZHrf+uLbjVNyvO31gteqz 89ynuk5VcX3ma7n//qmor/PcXf5ajEc5voten5zPcigL6r93O77L/WttvyzWTznvQ/vE0Jpde69i fjq9WOA+UBq6J154v+1df0Pr7bzPaH9f1N6/Llcf080G+mPTWa8D12Y+vvacsYFOvUVt/d66/Oy6 rjcai6vWqSVttg7WYu+hh4V+w5gXcb5Aq3o9fOr8qd+IjTA4pbVGrZjUtpFvmtQMbS5p9aAytPCH BrtsLsrPWbvx5MU88DnlsXb8Uxq+ISybqc5FlZu48iZYbjzFxtK/QffPpXzQSCm1G3P5Pf0H+k3m e+3CTt2Lrqync2PNNZeBS1qNVW6A2jBloElrb175Qba/ZjepuVdDe+7ltTOwoa7dMPNLh16fbxrd IroPeUPndwOGHoSKQs6OpfJQt96ysUvFmJQNbOdBavn79tdy88+fkVJKORTpNTaD+9EWN7FLXtyp p9Te+Ir9dZEfYtKqAcxraK3x7dXbX6+Xrt1zXtM/p8575s8sGpj2Nbn5Kc67PPeyIS4byLWbVnHt lQ1/p+5ir2wf9Aau704NObBuitAoN72puPaHmsTl8U7TklJnbZV78tCNeOgct5HXXxs+FWO+WL3o 7P6Vz2f5IJjPOY9tfjDr34vyOJRzVhSwOud8aPk9dVW1D+p5jPIDRHvNVMsfdM1mqzWbx7G476be OikG8OyX8vcb3G8WRQ1D+3BKqRN0lA8RF4WpuemviroG76n5vfPetrxv5rCz00M068HUYM3N6sGl XJttH5PS+prtrfeqV1dKZ3NUNtdN06TFfN4JmFM6+yFJfw76127nYaI3N3lt5HNZFGsrr4FF6oYB /Xnf6AGq7HuWY7NomrN7y/L8m/k8zfPeuxyD/J5t2Ll8fTtHvfFd9M6vPfd8jabVD/D7fUa5r+U6 23CqN1b5mix/MNaO9bLWYjBWY9QLoTtjXeqt3XJO+/vZWg9UnHeue23OBl7Xf6/yWHtuvfFJvc9J 5fHyWi3GYJFWgdtiPm/D8nJvHLr2LzLUr5b7dNmjNdXwdZFD/GjP1umJyvWRztb06Xzeuc+lxSLN i++venOcx7TsQ/Layd+fqtWzUv7BTH+fLH/QM7Q28vc3qdh3i/to+dryOukc749FMd+pOfsBShnw pGKMFk2Tmvl8PeBbLFKazdoQuc5zU+yX2967tzF0Laz1v0t5Xxt63dFy/qpyf8g/sDn7Qnvfa8e5 /KFbr542oC7HPBX3/DK8S909INfRn5f23l+edx7v5X6XqrOwv/3asr9p76t5vyg+Z22+irXX2Qdz HeWYVqsfSPev8/LX9vwH6i772Cqt7gGdazbXk/eooodqe8o8h0XtzXLcyvHPv+a5zvPR7/U6/XBv D0lp9QwytF/310Fnz226wdhR/kF+fq/yntO7tvN79/OZdn7yD40H7rWd/aK3Hw3tkx0D19JaXxbQ WSvLmsp9v1xv/TwnEuJe9Dza+VPxeeV1mIq12fZ6zSpbyWsk7xFr62GLcWlrHtpbir1nbTxCn7Sd fp9a9rKpOHaR/wc8OgTXo7mNbgAAAABJRU5ErkJggg=="/>
  

</svg>
</div>