Прямоугольник Javascript SVG обрезается
Новое в JavaScript. И СВГ. Так что да. Любая помощь для этого новичка очень ценится.
Картинка тоже выложена. Это прямоугольник со скругленными углами, но я не могу заставить его расти больше, чем он есть. Как будто он обрезается снизу и справа. Я уверен, что это действительно просто, но это просто полностью заблокировало меня.
В конечном счете, я бы хотел, чтобы этот прямоугольник занимал всю ширину страницы.
Вот мой код:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>POC</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type = "text/css">
</head>
<body>
<div id = "main">
<svg id = "mySVG" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"></svg>
</div>
<script type = "module">
var svgNS = "http://www.w3.org/2000/svg";
function makeShape1() {
var shape = document.createElementNS(svgNS, "rect");
shape.setAttributeNS(null, "x", 5);
shape.setAttributeNS(null, "y", 5);
shape.setAttributeNS(null, "rx", 5);
shape.setAttributeNS(null, "ry", 5);
shape.setAttributeNS(null, "width", 400);
shape.setAttributeNS(null, "height", 400);
shape.setAttributeNS(null, "fill", "green");
document.getElementById("mySVG").appendChild(shape);
}
makeShape1();
</script>
</body>
</html>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
51
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вам просто нужен viewBox.
Я начал с (5, 5), но вы можете начать с (0, 0), вам придется увеличить ширину и высоту, если вы это сделаете. Например. ViewBox="0 0 410 410"
<!DOCTYPE html>
<html lang = "en">
<head>
<title>POC</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type = "text/css">
</head>
<body>
<div id = "main">
<svg id = "mySVG" viewBox = "5 5 400 400" preserveAspectRatio = "none"></svg>
</div>
<script type = "module">
var svgNS = "http://www.w3.org/2000/svg";
function makeShape1() {
var shape = document.createElementNS(svgNS, "rect");
shape.setAttributeNS(null, "x", 5);
shape.setAttributeNS(null, "y", 5);
shape.setAttributeNS(null, "rx", 5);
shape.setAttributeNS(null, "ry", 5);
shape.setAttributeNS(null, "width", 400);
shape.setAttributeNS(null, "height", 400);
shape.setAttributeNS(null, "fill", "green");
document.getElementById("mySVG").appendChild(shape);
}
makeShape1();
</script>
</body>
</html>Другие вопросы по теме
Отзывчивое SVG-изображение ширины с прямоугольником фиксированной высоты внизу — см. мою ручку
Как изменить автоматически сгенерированный <svg> из углового материала
Как мы можем добавить значки SVG для создания ленты
Изменение размера пути клипа Svg в соответствии с областью просмотра
Класс пути значка SVG в CSS
Рисование с использованием пути к значку SVG
Как нарисовать дугу внутри другого круга с помощью svg
Почему пользовательские заголовки для «Политики безопасности контента» не работают на github?
Расширения azure-devops не принимают файлы SVG
Создание изображения из svg не работает
Похожие вопросы
Самый простой способ переключить функциональность в vanilla JS
Отправка ответа формы от реакции на узел экспресс с помощью axios
Заполните поле, затем найдите - мангуст
RequestSingleInstanceLock возвращает ошибку, предотвращающую блокировку экземпляра в ElectronJS
Могу ли я получить позицию элемента div (созданного циклом из JavaScript) при нажатии кнопки внутри этого div?
Не удается прочитать свойства undefined (чтение «длины») при циклическом переборе состояния
Объявите переменную let без присвоения значения в Javascript, почему это так?
Ускорить node.js при работе со строками из большого файла
Выполнение запроса на выборку в транзакции Firestore: получение «Невозможно изменить зафиксированный WriteBatch»
Невозможно изменить состояние поля ввода реакции, всегда заканчивается начальным значением
Размер svg по умолчанию — 300/150. Поскольку вы не указали размер (ширину, высоту) или viewBox(), это размер элемента svg. Между тем прямоугольник имеет ширину и высоту 400 и начинается с x = "5" height = "5". Вам понадобится viewBox как минимум viewBox = "0 0 410 410", чтобы увидеть весь прямоугольник.