Блог

У меня есть несколько значков SVG на странице, но когда я пытаюсь распечатать страницу, я вижу в предварительном просмотре, что некоторые дополнительные боковые строки будут напечатаны (и печатаются).

Если я изменяю уровень масштабирования, эти линии, как правило, исчезают, но я все еще могу видеть их на фактической печатной бумаге.

Приложение выполняется в React, но я не думаю, что это имеет какое-либо влияние, поскольку я вижу, что проблема воспроизводит то же самое, если я посмотрю на предварительный просмотр только значка SVG.

Я попытался увеличить viewBox SVG, размер элемента контейнера и добавить fill="none" к <svg> элементу, но ничего не помогло.

Это один из значков, которые я использую в приложении:

 <?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="33px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none">
    <defs>
        <path d="M16.5,32 C7.93958638,32 1,25.0604136 1,16.5 C1,7.93958638 7.93958638,1 16.5,1 C25.0604136,1 32,7.93958638 32,16.5 C32,25.0604136 25.0604136,32 16.5,32 Z M16.5,30 C23.9558441,30 30,23.9558441 30,16.5 C30,9.04415588 23.9558441,3 16.5,3 C9.04415588,3 3,9.04415588 3,16.5 C3,23.9558441 9.04415588,30 16.5,30 Z M22.4283814,11.3631277 L14.0480414,19.7309601 L11.3280853,17.0150634 C10.6594033,16.3731302 9.59921563,16.3835368 8.94330153,17.0384719 C8.28738743,17.6934071 8.27696531,18.7520124 8.91985804,19.4196964 L12.7728601,23.2669478 C13.5169128,23.9110174 14.6219722,23.9110174 15.3660249,23.2669478 L24.8576059,13.789533 C25.1799837,13.4678435 25.3611111,13.0314145 25.3611111,12.5763304 C25.3611111,12.1212462 25.1799837,11.6848173 24.8576059,11.3631277 C24.1866054,10.6937722 23.099382,10.6937722 22.4283814,11.3631277 Z" id="path-1"></path>
    </defs>
    <g id="Visual-/-Icons-/-Md-/-check-circle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <use id="Shape" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
        <g id="Base-/-Colour-/-Brand-/-Primary-dark" mask="url(#mask-2)" fill="#009c41">
            <rect id="Rectangle-2-Copy-5" x="0" y="0" width="33" height="33"></rect>
        </g>
    </g>
</svg>

  

Есть ли способ избежать этих дополнительных боковых линий при изменении уровня масштабирования или печати?

Из-за довольно нетрадиционного способа рисования этой фигуры вы видите некоторое «кровотечение».

Попробуйте просто нарисовать саму фигуру:

 <?xml version="1.0" encoding="UTF-8"?>
<svg width="33px" height="33px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none">
    <path d="M16.5,32 C8,32 1,25 1,16.5 C1,8 8,1 16.5,1 C25,1 32,8 32,16.5 C32,25 25,32 16.5,32 Z M16.5,30 C24,30 30,24 30,16.5 C30,9 24,3 16.5,3 C9,3 3,9 3,16.5 C3,24 9,30 16.5,30 Z M22.5,11.5 L14,19.5 L11.5,17 C10.5,16.5 9.5,16.5 9,17 C8.5,17.5 8.5,18.5 9,19.5 L13,23.5 C13.5,24 14.5,24 15.5,23.5 L25,14 C25,13.5 25.5,13 25.5,12.5 C25.5,12 25,11.5 25,11.5 C24,10.5 23,10.5 22.5,11.5 Z" fill="#009c41"></path>
</svg>  

Я также привел в порядок сам путь — вам не нужна точность до микропикселей в ваших числах, поэтому я просто округлил каждое число до ближайшего полупикселя — и даже это, вероятно, излишне. Экономит много байтов в долгосрочной перспективе!