Создайте равносторонний треугольник, используя SVG в HTML с основанием и высотой 100px - PullRequest
Новая
       0

Создайте равносторонний треугольник, используя SVG в HTML с основанием и высотой 100px

0 голосов
/ 02 марта 2019

Я пытаюсь создать SVG с базой и высотой 100px.Но не уверен, что это правильно.Я не получаю точный вывод, как мне нужно.Ниже приведен пример кода 

<svg id="triangle" viewBox="0 0 100 100">
        	<polygon points="50 15, 100 100, 0 100"/>
      </svg>

Пожалуйста, поправьте меня, где я делаю неправильно.Я очень ценю вашу помощь.

Спасибо!

1 Ответ

0 голосов
/ 02 марта 2019

Заверните в контейнер и установите размер в процентах.Тогда можно будет настроить размер и форма будет адаптивной. 

.container {
width:30%;
height:30%;
}
<div class="container">
        <svg id="triangle" viewBox="0 0 100 100">
            	<polygon points="50 15, 100 100, 0 100"/>
        </svg>
     </div>

второй вариант без использования контейнера: 

 <svg id="triangle" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="30%" height="30%" viewBox="0 0 100 100">
                	<polygon points="50 15, 100 100, 0 100"/>
 </svg>

третий вариант

Запись синтаксиса согласно спецификации polygon

Запятая должна отделять координату "X"и "Y" 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 100 100" style="border:1px solid gray;" >   
	
	<polygon points="50, 13.397 100, 100 0, 100"/>
</svg>

Обновление

Ответ на комментарии

Компилятор по-прежнему выдает ошибку, что этонеправильный треугольник.

Для проверки файла я добавил необходимые параметры 

<!DOCTYPE html>
<head> 
<title>Triangle</title>
</head> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 100 100"  >   
	
	<polygon points="50, 13.397 100, 100 0, 100/>    
</svg>

Загрузить этот файл в валидатор https://validator.nu/

enter image description here

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

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

...