Question

我们有一个SVG波形设计，该设计显示在WordPress网站的导航下方。 SVG当前处于浮动状态，一旦到达徽标所在的div，它希望SVG开始随浏览器缩小。本质上，我们希望SVG覆盖导航中的所有内容，但即使在出现以下情况时也不要覆盖徽标：缩小。那有可能吗？

有关实时示例和代码，请参见http://dev-wisco-radio.pantheonsite.io/

Answer 1

除了用百分比宽度近似效果或改变屏幕尺寸的媒体查询之外，我无法用纯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中）上对此进行了测试，并且可以正常工作，但是它很粗糙，并且由于最初仅在调整窗口大小的情况下运行，因此并未考虑初始页面加载。但是，进行必要的调整应该相当容易。

希望这会有所帮助！：）

Answer 2

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

使用上述代码更新了样式表（css）。会的。

达到徽标Div

2 个答案: