Блог

Главная - Вопросы по программированию - SVG-волна, не растягивающаяся до 100% ширины в Safari

SVG-волна, не растягивающаяся до 100% ширины в Safari

#html #css #svg

#HTML #css #svg

Вопрос:

Мой SVG не масштабируется до 100% ширины в Safari, как в IE, Chrome и Firefox. Я много пробовал, но не могу заставить свой SVG растягиваться до 100% ширины, как во всех других браузерах. Я использую React.

 .hero-svg {
  display: flex;
  width: 100%;
}

svg {
  display: flex;
  width: 100%;
  z-index: -1;
} 
 <div className="hero-svg">
    <svg viewBox="0 0 1440 320">
        <path fill="#3dd0f2" fillOpacity="1" d="M0,128L80,117.3C160,107,320,85,480,117.3C640,149,800,235,960,229.3C1120,224,1280,128,1360,80L1440,32L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
    </svg>
</div>

Я пробовал использовать preserveAspectRatio = "none" , но это не сильно меняется.

Вот скриншот Chrome, а затем Safari:

Chrome:

Сафари:

Комментарии:

1. На моем iPad с Safari (IOS 14) она растягивается нормально.

2. Можете ли вы опубликовать скриншот того, что вы подразумеваете под svg, не масштабируется до 100% ширины в Safari . Я только что проверил это в Safar v14, и, похоже, все в порядке.

3. Вы используете className . Используете ли вы react?

4. Да, я использую react, и я только что загрузил скриншот

5. z-index не будет работать без position, попробуйте добавить пространства имен svg и удалить display:flex

Ответ №1:

Я все понял. Это сработало:

 <div className="hero-svg">
    <svg  viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
        <path fill="#f0f0f0" fillOpacity="1" d="M0,32L80,32C160,32,320,32,480,37.3C640,43,800,53,960,80C1120,107,1280,149,1360,170.7L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"></path>
    </svg>
</div>

css:

 .hero-svg{
  display: flex; 
  width: 100%;

  svg{
    width: 100%;
    z-index: -1;
  }
}