У меня есть следующий HTML файл (mypage.html). Файл SVG
прикрепляется как изображение в него.
<!doctype html>
<html>
<body>
<!-- Display legend -->
<div>
<center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
</div>
</body>
</html>
Создаваемая им страница выглядит следующим образом:
Обратите внимание, что вокруг круга есть большое белое пространство. Как я могу обрезать это в html или CSS?
Вы можете обрезать изображение, используя отрицательные поля и установив размер родительского элемента:
CSS Отображение изображения с измененным размером и обрезкой
Вы можете не только отображать svg прямо в html:
<svg viewBox="0 0 100 100" height="150px" width="150px">
<rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/>
</svg>Ни один из этих ответов (и несколько похожих/дубликатов), казалось, полностью не отвечал на этот вопрос и приводил пример.
Определите "фактический" размер вашего svg без заполнения. Для меня это было проще всего с помощью инспектора (Chrome) и зависания над элементом пути в инспекторе. Вы увидите ширину и высоту, отображаемую рядом с фактическим svg в вашем браузере.
Теперь отредактируйте код svg непосредственно в редакторе текста/кода. Вы будете изменять код только в теге элемента svg.
Этот пример сделает его чрезвычайно простым и будет использовать svg непосредственно ниже в качестве ссылки. Если вы хотите пройти через этот точный пример, просто поместите весь код ниже в теги HTML <html> svg code </html> и откройте в своем браузере.
<svg xmlns="http://www.w3.org/2000/svg" width="48"
height="48" viewBox="0 0 48 48">
<path d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21
0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM12
18h24v4H12v-4zm16 10H12v-4h16v4zm8-12H12v-4h24v4z"/></svg>
+ Предположим, вы смогли выполнить шаг №1 и определить "фактические" размеры вашего svg без заполнения. Для этого примера фактические размеры 40 x 40. Измените атрибуты svg, чтобы отразить это.
width="40" height="40"
+ Наши начальные размеры были 48 х 48, а наши фактические размеры (без заполнения) - 40 х 40. Половина этой разницы составляет 4 х 4. Соответственно измените атрибут viewBox и добавьте нашу фактическую ширину и высоту.
viewBox="4 4 40 40"
+ Наш открытый svg-тег должен теперь отражать эти изменения.
<svg xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="4 4 40 40">
+ Если заполнение вокруг вашего svg имеет разные значения для верхнего/нижнего и правого/левого, это не проблема. Просто следуйте приведенным выше стандартным инструкциям, а затем поиграйте с первыми двумя значениями свойства viewBox, чтобы получить представление о том, как эти значения сдвигают изображение вдоль осей x и y.
Я только что узнал все это сегодня, имея дело с той же проблемой. Полностью открыт для предложений/исправлений от любого более осведомленного о манипуляции масштабируемой векторной графикой, чем I
Вы можете делать именно то, что вы хотите с идентификаторами фрагментов. Идентификаторы фрагментов позволяют вам определить сегмент SVG, который вы хотите отобразить в теге img, а также позволяют управлять преобразованиями изображения и соотношением сторон.
Добавление #svgView(viewBox(0, 0, 32, 32)) в конец URL-адреса svg определяет область в svg, которую вы хотите отобразить. Первые 2 параметра - это x и y
координаты верхнего левого угла окна просмотра, а вторые 2 параметра - это ширина и высота окна просмотра.
Используя эту технику, ваши теги img будут выглядеть примерно так:
<img src="circos-table-image-medium.svg#svgView(viewBox(0, 0, 32, 32))" height=3500; width=3500; />
Важно убедиться, что соотношение сторон окна просмотра совпадает с соотношением сторон тега img, в противном случае окно просмотра не будет иметь правильный размер/выравнивание. Если вам нужен дополнительный контроль соотношения сторон, вы всегда можете использовать preserveAspectRatioSpec идентификатор фрагмента.
Чтобы найти viewBox для всего изображения, перейдите непосредственно к URL-адресу svg и осмотрите элементы страницы, чтобы найти viewBox, определенный для самого внешнего элемента svg.
Вооружившись этой информацией, теперь вы можете адаптировать свое окно просмотра к вашим потребностям.
Просто используйте Inkscape.
Я сначала рекомендую прочитать сообщение Дэвида Ребда о настройке размеров изображения SVG с помощью текстового редактора (например, Notepad ++).
Затем в Inkscape просто нажмите на элемент, и вы можете буквально просто установить размеры, даже не беспокоясь о точном перетаскивании мыши.
Если панель инструментов отсутствует, щелкните в меню "Вид", затем "Показать/скрыть" и включите панель управления "Инструменты".
Прежде чем пытаться исправить код, вы можете попытаться оптимизировать макет SVG. Белое пространство, видимое в Inspector, ссылается на то, что SVG не плотно установлен на монтажной панели. Если у вас есть Adobe Illustrator, откройте свой SVG. Вы должны увидеть что-то похожее на это:
Белая область - это ваша монтажная область, окружность вашего SVG. Вы хотите, чтобы ваш SVG был такого же размера, как и монтажная. Эта кнопка позволяет изменить размер вашей монтажной области:
Выберите это, выберите свой белый квадрат, приведите края, чтобы коснуться вашего круга и сохраните свой SVG.
Другое потенциальное исправление для вашего фактического файла SVG может заключаться в том, что есть обтравочная маска, которая расширяет размер SVG-графики. В этом случае вам нужно будет удалить эти маски, где это возможно. Чтобы определить, есть ли обтравочная маска, влияющая на ваш SVG, нажмите на свой круг. Если окружающий ящик не касается краев вашего круга при выборе, у вас есть обтравочная маска, которая выталкивает границы вашего изображения.
Глядя на ваше изображение, это может быть довольно сложно, и если вы не слишком хорошо знакомы с векторным редактированием, быстрее и проще передать его дизайнеру.
Чтобы обрезать inkscape, выполните шаги 4, 11 и 12 в https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape#
После этого в меню "Редактировать" используйте "Изменить размер страницы для выбора".