碰到标志 Div 时缩放 SVG答案

【问题标题】：Scale SVG when it hits the logo Div碰到标志 Div 时缩放 SVG
【发布时间】：2019-01-02 22:43:39
【问题描述】：

我们有一个 SVG 波浪设计，出现在 WordPress 网站的导航下方。 SVG 目前是浮动的，并且希望 SVG 在到达徽标所在的 div 时开始随着浏览器缩小。本质上，我们希望 SVG 覆盖导航中的所有内容，但从不覆盖徽标，即使在缩小。这可能吗？

查看http://dev-wisco-radio.pantheonsite.io/ 获取实时示例和代码

【问题讨论】：

我无法理解您的问题，请显示一些代码或执行view source 并使用pastebin 显示代码
您是否尝试过将徽标和 SVG 放在两列网格中（可能是 3:9）？

标签： html css wordpress svg sass

【解决方案1】：

.homepage-svg {
  height: auto;
  width: 100%;
  max-width: 100%;
  padding-left: 180px;
  float: right;
}

使用上述代码更新了您的样式表 (css)。会成功的。

【讨论】：

【解决方案2】：

除了使用百分比宽度来近似效果或针对屏幕尺寸改变媒体查询之外，我无法使用纯 CSS 找到解决方案。然而，这完全可以通过 Javascript 根据屏幕和徽标宽度调整 SVG 大小来实现。以下是基于您当前的 HTML 和 CSS 使用 JS 的快速实现：

var wave = document.getElementsByClassName("homepage-svg")[0];
var logo = document.getElementsByClassName("site-branding")[0];

window.addEventListener('resize', function(event){
    var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //Support for different browsers
    var logoWidth = logo.offsetWidth;

    var maxSVGWidth = 1200; //1200px was obtained from your CSS

    //If the screen is too small to show both the wave and the logo at full size (with no overlap), decrease the width of the wave
    if(screenWidth < maxSVGWidth + logoWidth) {
        wave.style.width = screenWidth - logoWidth + "px";
    }
});

我在您共享的链接（在 Chrome 中）上对此进行了测试，它工作正常，但非常粗糙，并且不考虑初始页面加载，因为它仅在调整窗口大小时运行。但是，进行任何必要的调整应该相当容易。

希望这会有所帮助！ :)

【讨论】：