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

/*
Cut the string without breaking any words, UTF-8 aware 
* param string $str The text string to split
* param integer $start The start position, defaults to 0
* param integer $words The number of words to extract, defaults to 15
*/
function wordCutString($str, $start = 0, $words = 15 ) {
    $arr = preg_split("/[\s]+/",  $str, $words+1);
    $arr = array_slice($arr, $start, $words);
    return join(' ', $arr);
}

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

$input = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
echo wordCutString($input, 0, 10); 

Это выводит первые 10 слов.

Функция preg_split используется для разделения строки на подстроки. Границы, вдоль которых должна быть разбита строка, задаются с использованием шаблона регулярных выражений.

preg_split функция принимает 4 параметра, но только первые 3 относятся к нам прямо сейчас.

Первый параметр - шаблон. Первый параметр - это шаблон регулярных выражений, вдоль которого должна быть разбита строка. В нашем случае мы хотим разбить строку на границы слов. Поэтому мы используем предопределенный класс символов \s, который соответствует символам пробела, таким как пробел, вкладка, возврат каретки и фид строки.

Второй параметр - строка ввода Второй параметр - это длинная текстовая строка, которую мы хотим для разделения.

Третий параметр - лимит Третий параметр указывает количество подстрок, которые должны быть возвращены. Если вы установите предел на n, preg_split вернет массив из n элементов. Первые n-1 элементы будут содержать подстроки. Последний элемент (n th) будет содержать остальную часть строки.

2
задан Alexandr_TT 2 March 2019 в 04:30
поделиться

1 ответ

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

.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>
[ 1134]

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

Запишите синтаксис согласно спецификации многоугольник

Запятая должна разделять координаты "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>

Обновление

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

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

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

<!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

0
ответ дан Alexandr_TT 2 March 2019 в 04:30
поделиться
Другие вопросы по тегам:

Похожие вопросы: