Блог

Главная - Вопросы по программированию - текст svg не отображается

текст svg не отображается

#svg #text

#svg #текст

Вопрос:

Я использую svg для отображения географических данных soe. Чтобы сделать это, я настраиваю свой viewbox на соответствие реальному миру и использую координаты GPS. Я хочу нарисовать круг по заданным координатам и написать внутри него некоторый текст. Круг в порядке, но где текст? Ниже приведен пример скрипки.

 <svg 
	id="svg"
	width="1000" height="1000"
	viewBox="27.9043663 -43.2012437 0.0366674 0.0366674"
	preserveAspectRatio="xMidYMid meet" 
	xmlns="http://www.w3.org/2000/svg" 
	xlink="http://www.w3.org/1999/xlink" 
	ev="http://www.w3.org/2001/xml-events" 	
	shape-rendering="geometricPrecision"
	>
  
  <circle cx=27.9227000 cy=-43.1829100 r="0.016667" style="stroke:#000; stroke-width:0.00016667;" fill="none"/>
  <text x=27.9227000 y=-43.1829100 fill="#000"  font-family="'Lucida Grande', sans-serif" font-size="12">test</text>
  </svg>

Ответ №1:

Ваш текст очень большой. Настолько большой, что ваш круг остается в пределах пробелов текста. Попробуйте font-size=".014" . Я боюсь, что меньший размер, чем этот, не будет отображаться.

 svg{border:1px solid;width:90vh;}  
 <svg 
	id="svg"
	viewBox="27.9043663 -43.2012437 0.0366674 0.0366674"
	preserveAspectRatio="xMidYMid meet" 
	xmlns="http://www.w3.org/2000/svg" 
	xlink="http://www.w3.org/1999/xlink" 
	ev="http://www.w3.org/2001/xml-events" 	
	shape-rendering="geometricPrecision"
	>
  
  <circle cx=27.9227000 cy=-43.1829100 r="0.016667" style="stroke:#000; stroke-width:0.00016667;" fill="none"/>
  <text x=27.91 y=-43.179 fill="#000"  font-family="'Lucida Grande', sans-serif" font-size=".014">test</text>
  </svg>

Я бы порекомендовал прочитать о ограничениях чисел в SVG

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

1. Спасибо. Это было причиной. Очевидно, я должен масштабировать свои координаты.