Как изменить высоту в SVG, чтобы пользователю не приходилось прокручивать вниз? - PullRequest
Новая
       0

Как изменить высоту в SVG, чтобы пользователю не приходилось прокручивать вниз?

1 голос
/ 15 марта 2019

Это страница Я работаю, пожалуйста, посмотрите на это.Мне нужно изменить его высоту, чтобы пользователю не приходилось прокручивать вниз.

Это SVG-код здесь , слишком длинный, чтобы поместиться на вопросе SO.это 

<?php
/*
Template Name: Locations
*/
get_header(); 
$regions = get_field('regions');
$testimonials = get_field('locations_testimonials');
$time_of_each_slide = get_field('time_of_each_slide');
?>

<section id="locations" class="clearfix wrapper">
<div class="row"  style="background-color:white;">
<div class="col-xs-11 col-xs-push-1">
<h2>Places where we work</h2>
</div>
</div>
<div class="col-xs-12 col-md-9 padding-0" id="location-map-wrap">
    <span id="tooltip"></span>
    <?php echo get_field('region_map_svg'); ?>

</div>
<div class="col-xs-12 col-md-3" id="location-side-bar">
    <div id="location-detail" data-timer="<?php echo $time_of_each_slide; ?>">
    <h3>What our beneficiaries say about us...</h3>
    <div class="inner clearfix">

    <?php foreach($testimonials as $testimonial): ?>
        <div class="testimonial">
            <div class="text"><?php echo $testimonial['testimonial']; ?></div>
            <div class="author"><?php echo $testimonial['author']; ?></div>
        </div>
    <?php endforeach; ?>
    </div>
    <a href="/projects" class="cta-btn">Learn more about our projects</a>
    </div>
</div>
</section>

<?php get_footer(); ?>

Я не знаю, где остальная часть кода, это сайт WordPress, поэтому получить полный код сложно, и я не тот, кто создал сайт, но опять же,все, что я хочу, это изменить размер SVG, чтобы он соответствовал приведенной выше странице без прокрутки. Я включил в него код.

То, что я пробовал:

  • Ширина вводаи высотой до SVG, что испортило сайт
  • Задание ширины и высоты до #map, что ничего не делало
  • Измените высоту div-обертки, которая обрезает SVG
  • Изменение окна просмотра SVG, которое портит его
  • Ввод ширины и высоты в SVG, но это обрезает SVG

1 Ответ

2 голосов
/ 16 марта 2019

Хотя это и не является частью самого вопроса, фактический HTML-код вашего сайта выглядел следующим образом: 

<style>…</style> <!DOCTYPE html>  <html lang="en-GB" prefix="og: http://ogp.me/ns#"> <head> …

В соответствии со спецификацией HTML 5 тип документа должен находиться наначало документа.В противном случае ваша страница будет интерпретироваться с использованием различных устаревших методов рендеринга, которые могут не соответствовать стандартам HTML5.Это вполне могло быть причиной того, что ни одна из ваших попыток правильно позиционировать SVG не сработала так, как вы ожидали.

При этом для позиционирования самого изображения я бы предложил использовать vh блок просмотра.С относительно хорошей поддержкой браузера вы можете комбинировать ее с calc() для определения размера любого элемента относительно размера области просмотра.Если вы знаете, например, что ваш заголовок имеет высоту 200px, то вы можете использовать следующее, чтобы плотно разместить SVG под ним: 

svg {
  height: calc(100vh - 200px);
}

Это работает не только с изображениями, но и с любымиэлемент, так что вы можете применить это к своим столбцам и использовать height: 100% для содержимого в них для аналогичного эффекта.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...