Проблема масштабирования фонового изображения SVG - PullRequest
Новая
       14

Проблема масштабирования фонового изображения SVG

0 голосов
/ 07 мая 2018

Я использую SVG (белый треугольник) в качестве фонового изображения на псевдоэлементе перед, как видно на изображении. Если я установлю высоту равной размеру SVG, она не будет иметь полпиксельной линии. Но так как мне нужно, чтобы это было отзывчивым, я установил фоновый размер как «cover» (тот же результат, если я использую «содержать»).

Вот мой CSS-код, реализующий красную полосу с белым треугольником: 

#careers{margin:7em 0 0}
#careers a{width:100%;height:auto;overflow:hidden;display:block;-webkit-box-shadow:7px 10px 11px 0 rgba(0,0,0,.16);-moz-box-shadow:7px 10px 11px 0 rgba(0,0,0,.16);box-shadow:7px 10px 11px 0 rgba(0,0,0,.16)}
#careers a img{width:100%;height:auto;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-ms-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;display:block;z-index:10}
#careers a:hover img{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05)}
#careers .col-md-5{z-index:15}
#careers .careers-holder{padding:0 15% 0 15px;color:#fff;z-index:10}
#careers .careers-holder .btn{width:auto;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block}
#careers::before{content:'';position:absolute;width:calc(100% - 4.1666665%);height:385px;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);background:#d02139 url(http://ranfurlie.website.2018.360southclients.net:8080/img/icon-triangle-white.svg) top right no-repeat;background-size:cover;z-index:1}
<section id="careers">
    <div class="container-fluid">
        <div class="row vertical-align">
            <div class="col-md-1"></div>
            <div class="col-md-5">
                <a href="<?php echo $careers_link; ?>"><img src="<?php echo $careers_image[0]; ?>" width="705" height="450" alt="Careers" /></a>
            </div>
            <div class="col-md-5 careers-holder">
                <h3>Careers</h3>
                <h2>Interested in working for us?</h2>
                <p>We are rapidly growing and always need talent to continue our pace. If you’re up for a great challenges and the rewarding career, check out our current positions available.</p>
                <a href="<?php echo $careers_link; ?>" class="btn white">Read more</a>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
</section>

Вот HTML-код для этого раздела:

1 pixel line

Есть идеи, как или почему есть половина пикселя красного? Фоновое изображение SVG установлено в верхнем правом углу.

Сам SVG можно найти здесь:

http://ranfurlie.website.2018.360southclients.net:8080/img/icon-triangle-white.svg

РЕДАКТИРОВАТЬ: я добавил заданную ширину и высоту в код SVG, который, похоже, исправил проблему с пикселями для Firefox, но он все еще отображается в Chrome. У меня нет Mac для тестирования других браузеров.

1 Ответ

0 голосов
/ 07 мая 2018

Не добавляйте width и height к элементу SVG или background-size:cover в CSS. Способ позиционирования и определения размеров SVG работает через атрибут preserveAspectRatio: 

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 347 385" preserveAspectRatio="xMaxYMax slice">

Он будет следить за тем, чтобы viewBox покрывал весь фон элемента и располагался так, чтобы верхние правые углы совпадали.

(Остальные атрибуты, которые были установлены для элемента svg, не оцениваются.)

...