2

Появилась проблема с бордерами в svg (писал руками).
Если вставлять напрямую в HTML с помощью тега <svg></svg> все отображается нормально и бордеры в том числе.
Когда я выношу этот svg в отдельный файл и запускаю в браузере опять все отображается нормально.
Но когда вставляю этот svg в html с помощью тега <img /> как бы обрезаются границы (правая и нижняя).При этом не помогает даже ручная отрисовка границ с помощью тега <line />, но это распространяется лишь на нижнюю и правую границы.Как это исправить?

Пользуюсь Google Chrome ,проверил на Firefox там та же ошибка, но что удивительно в Edge все отображается нормально.

При просмотре самого svg

При просмотре svg вставленного в html

Code:

<svg width="660" height="660" wiewBox="0 0 660 660" style="border: 2px solid black;" xmlns="http://www.w3.org/2000/svg">
    		<style type="text/css">
    
    			.line {
    				stroke: #ccc;
    				stroke-width: 2;
    			}
    
    			.central {
    				stroke: #777;
    				stroke-width: 3;
    			}
    
    			.area {
    				fill: transparent;
    				stroke: red;
    				stroke-width:3;
    			}
    
    			.back-ground {
    				fill: white;
    			}
    
    		</style>
    
    	<!--Back-ground-->
    		<rect x="0" y="0" width="660" height="660" class="back-ground"/>
    
    
    	<!--Verticale lines -->
    		<line x1="30" y1="0" x2="30" y2="660" class="line"/>
    		<line x1="60" y1="0" x2="60" y2="660" class="line"/>
    		<line x1="90" y1="0" x2="90" y2="660" class="line"/>
    		<line x1="120" y1="0" x2="120" y2="660" class="line"/>
    		<line x1="150" y1="0" x2="150" y2="660" class="line"/>
    		<line x1="180" y1="0" x2="180" y2="660" class="line"/>
    		<line x1="210" y1="0" x2="210" y2="660" class="line"/>
    		<line x1="240" y1="0" x2="240" y2="660" class="line"/>
    		<line x1="270" y1="0" x2="270" y2="660" class="line"/>
    		<line x1="300" y1="0" x2="300" y2="660" class="line"/>
    		<line x1="330" y1="0" x2="330" y2="660" class="line"/>
    		<line x1="360" y1="0" x2="360" y2="660" class="line"/>
    		<line x1="390" y1="0" x2="390" y2="660" class="line"/>
    		<line x1="420" y1="0" x2="420" y2="660" class="line"/>
    		<line x1="450" y1="0" x2="450" y2="660" class="line"/>
    		<line x1="480" y1="0" x2="480" y2="660" class="line"/>
    		<line x1="510" y1="0" x2="510" y2="660" class="line"/>
    		<line x1="540" y1="0" x2="540" y2="660" class="line"/>
    		<line x1="570" y1="0" x2="570" y2="660" class="line"/>
    		<line x1="600" y1="0" x2="600" y2="660" class="line"/>
    		<line x1="630" y1="0" x2="630" y2="660" class="line"/>
    
    	<!--Horizontale lines -->
    		<line x1="0" y1="30" x2="660" y2="30" class="line"/>
    		<line x1="0" y1="60" x2="660" y2="60" class="line"/>
    		<line x1="0" y1="90" x2="660" y2="90" class="line"/>
    		<line x1="0" y1="120" x2="660" y2="120" class="line"/>
    		<line x1="0" y1="150" x2="660" y2="150" class="line"/>
    		<line x1="0" y1="180" x2="660" y2="180" class="line"/>
    		<line x1="0" y1="210" x2="660" y2="210" class="line"/>
    		<line x1="0" y1="240" x2="660" y2="240" class="line"/>
    		<line x1="0" y1="270" x2="660" y2="270" class="line"/>
    		<line x1="0" y1="300" x2="660" y2="300" class="line"/>
    		<line x1="0" y1="330" x2="660" y2="330" class="line"/>
    		<line x1="0" y1="360" x2="660" y2="360" class="line"/>
    		<line x1="0" y1="390" x2="660" y2="390" class="line"/>
    		<line x1="0" y1="420" x2="660" y2="420" class="line"/>
    		<line x1="0" y1="450" x2="660" y2="450" class="line"/>
    		<line x1="0" y1="480" x2="660" y2="480" class="line"/>
    		<line x1="0" y1="510" x2="660" y2="510" class="line"/>
    		<line x1="0" y1="540" x2="660" y2="540" class="line"/>
    		<line x1="0" y1="570" x2="660" y2="570" class="line"/>
    		<line x1="0" y1="600" x2="660" y2="600" class="line"/>
    		<line x1="0" y1="630" x2="660" y2="630" class="line"/>
    
    	<!--Central lines -->
    		<line x1="330" y1="0" x2="330" y2="660" class="central"/>
    		<line x1="0" y1="330" x2="660" y2="330" class="central"/>
    
    
    	<!--Point area -->
    		<polygon points="30,30 630,30 630,630 30,630" class="area"/>
    
    	<!--Image area -->
    		
    
    </svg>

3
  • 1
    Благодарю. Хотите я вторым ответом покажу, как этот же результат можно получить кодом в несколько раз меньшим по размерам? 5 мар 2019 в 5:50
  • @Alexandr_TT былобы неплохо :) 5 мар 2019 в 5:52
  • ответ с pattern готов 5 мар 2019 в 6:27

2 ответа 2

3
  • wiewBox="0 0 660 660" правильно написание viewBox="0 0 660 660" ошибка всего в одной букве - v, но масштабирование работать не будет
  • Строка в SVG рисуется симметрично относительно осевой линии. Если осевая линия проходит по краю svg полотна,то половины толщины линии будет не видно. Это надо учитывать и всегда отступать от края.
  • Учитывая этот факт, я увеличил viewBox="-2 -2 664 664" чтобы вся линия попадала в зону видимости.
  • Внешнюю рамку у вас обеспечивал стиль в шапке SVG -
    style="border: 2px solid black;"

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

  • Для задания внешнего контура вашего чертежа у вас есть rect

    <rect x="0" y="0" width="660" height="660" class="back-ground"/>

  • Добавил стили, чтобы его было видно.

<svg width="660" height="660" viewBox="-2 -2 664 664"  xmlns="http://www.w3.org/2000/svg">
    		<style type="text/css">
    
    			.line {
    				stroke: #ccc;
    				stroke-width: 2;
    			}
    
    			.central {
    				stroke: #777;
    				stroke-width: 3;
    			}
    
    			.area {
    				fill: transparent;
    				stroke: red;
    				stroke-width:3;
    			}
    
    			.back-ground {
    				fill: white;
				  	stroke-width:2;
				  	stroke:#000;
    			}
    
    		</style>
    
    	<!--Back-ground -->
    		<rect x="0" y="0" width="660" height="660" class="back-ground"/> 
    
    
    	<!--Verticale lines -->
    		<line x1="30" y1="0" x2="30" y2="660" class="line"/>
    		<line x1="60" y1="0" x2="60" y2="660" class="line"/>
    		<line x1="90" y1="0" x2="90" y2="660" class="line"/>
    		<line x1="120" y1="0" x2="120" y2="660" class="line"/>
    		<line x1="150" y1="0" x2="150" y2="660" class="line"/>
    		<line x1="180" y1="0" x2="180" y2="660" class="line"/>
    		<line x1="210" y1="0" x2="210" y2="660" class="line"/>
    		<line x1="240" y1="0" x2="240" y2="660" class="line"/>
    		<line x1="270" y1="0" x2="270" y2="660" class="line"/>
    		<line x1="300" y1="0" x2="300" y2="660" class="line"/>
    		<line x1="330" y1="0" x2="330" y2="660" class="line"/>
    		<line x1="360" y1="0" x2="360" y2="660" class="line"/>
    		<line x1="390" y1="0" x2="390" y2="660" class="line"/>
    		<line x1="420" y1="0" x2="420" y2="660" class="line"/>
    		<line x1="450" y1="0" x2="450" y2="660" class="line"/>
    		<line x1="480" y1="0" x2="480" y2="660" class="line"/>
    		<line x1="510" y1="0" x2="510" y2="660" class="line"/>
    		<line x1="540" y1="0" x2="540" y2="660" class="line"/>
    		<line x1="570" y1="0" x2="570" y2="660" class="line"/>
    		<line x1="600" y1="0" x2="600" y2="660" class="line"/>
    		<line x1="630" y1="0" x2="630" y2="660" class="line"/>
    
    	<!--Horizontale lines -->
    		<line x1="0" y1="30" x2="660" y2="30" class="line"/>
    		<line x1="0" y1="60" x2="660" y2="60" class="line"/>
    		<line x1="0" y1="90" x2="660" y2="90" class="line"/>
    		<line x1="0" y1="120" x2="660" y2="120" class="line"/>
    		<line x1="0" y1="150" x2="660" y2="150" class="line"/>
    		<line x1="0" y1="180" x2="660" y2="180" class="line"/>
    		<line x1="0" y1="210" x2="660" y2="210" class="line"/>
    		<line x1="0" y1="240" x2="660" y2="240" class="line"/>
    		<line x1="0" y1="270" x2="660" y2="270" class="line"/>
    		<line x1="0" y1="300" x2="660" y2="300" class="line"/>
    		<line x1="0" y1="330" x2="660" y2="330" class="line"/>
    		<line x1="0" y1="360" x2="660" y2="360" class="line"/>
    		<line x1="0" y1="390" x2="660" y2="390" class="line"/>
    		<line x1="0" y1="420" x2="660" y2="420" class="line"/>
    		<line x1="0" y1="450" x2="660" y2="450" class="line"/>
    		<line x1="0" y1="480" x2="660" y2="480" class="line"/>
    		<line x1="0" y1="510" x2="660" y2="510" class="line"/>
    		<line x1="0" y1="540" x2="660" y2="540" class="line"/>
    		<line x1="0" y1="570" x2="660" y2="570" class="line"/>
    		<line x1="0" y1="600" x2="660" y2="600" class="line"/>
    		<line x1="0" y1="630" x2="660" y2="630" class="line"/>
    
    	<!--Central lines -->
    		<line x1="330" y1="0" x2="330" y2="660" class="central"/>
    		<line x1="0" y1="330" x2="660" y2="330" class="central"/>
    
    
    	<!--Point area -->
    		<polygon points="30,30 630,30 630,630 30,630" class="area"/>
    
    	<!--Image area -->
    		
    
    </svg>

  • Загрузил этот файл на сервер Вызываю его с помощью <img>

<img src="https://svg-art.ru/files/rect4.svg" width="660" height="660" >

Но имейте ввиду, что при таком способе добавления SVG в HTML вы не сможете его стилизовать из внешней таблицы стилей

О других способах добавления SVG в HTML более подробно здесь.

2
  • Спасибо, это помогло. Но я не понимаю почему именно -2 -2 664 664, причину почему -2 я понял но не причину ставить 664 и 664 5 мар 2019 в 5:50
  • @ЕвгенийБабийчук Так нужно было весь прямоугольник отодвинуть от краев канваса SVG на 2px и 664 даёт расширение просмотрового окна на 4px Потом всё сжимается в пользовательском окне, который вы видите до Width="660" и остается свободное пространство по контуру 2px 5 мар 2019 в 5:54
1

Использование pattern

Вы используете для получения ячеек вертикальные и горизонтальные линии.
А если таких ячеек нужно будет нарисовать несколько тысяч?

В этом случае используется pattern, в котором указываются размеры одной ячейки 30 X 30 px и с помощью команды fill="url(#newpattern)" заполняется вся фигура

Подробнее о pattern здесь

<defs>
      <pattern id="newpattern"
             x="0" y="0" width="30" height="30"
             patternUnits="userSpaceOnUse" >

            <g fill="none" stroke="#ccc" stroke-width="2">
             <rect x="0" y="0" width="30" height="30" />
            </g>
      </pattern>
 </defs>    

Ниже пример всего кода:

<svg width="660" height="660" viewBox="-2 -2 664 664"  xmlns="http://www.w3.org/2000/svg">
    		<style type="text/css">
    
    			.line {
    				stroke: #ccc;
    				stroke-width: 2;
    			}
    
    			.central {
    				stroke: #777;
    				stroke-width: 3;
    			}
    
    			.area {
    				fill: transparent;
    				stroke: red;
    				stroke-width:3;
    			}
    
    			.back-ground {
    				fill: white;
					stroke-width:3;
					stroke:#000;
    			} 
    
    		</style>
    
    	<!--Back-ground --> 
		
		    <defs>
			  <pattern id="newpattern"
             x="0" y="0" width="30" height="30"
             patternUnits="userSpaceOnUse" >
               
            <g fill="none" stroke="#ccc" stroke-width="2">
             <rect x="0" y="0" width="30" height="30" />
            </g>
      </pattern>
			</defs>
		
		     <rect x="0" y="0" width="660" height="660" class="back-ground"/> 
    		<rect x="0" y="0" width="660" height="660"  fill="url(#newpattern)"/> 
	   	<!--Central lines -->
    		<line x1="330" y1="0" x2="330" y2="660" class="central"/>
    		<line x1="0" y1="330" x2="660" y2="330" class="central"/>
       	<!--Point area -->
    		<polygon points="30,30 630,30 630,630 30,630" class="area"/> 
        
    </svg>

1
  • 1
    @Евгений Бабийчук Не понравился вариант? 5 мар 2019 в 18:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.