it-swarm.com.ru

Как обрезать файл SVG в HTML/CSS

У меня есть следующий HTML-файл (mypage.html). SVG file Прикреплен как изображение к нему.

<!doctype html>
<html>


<body>

    <!-- Display legend -->
    <div>
        <center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
    </div>


</body>
</html>

Страница, которую он генерирует, выглядит так:

 enter image description here

Заметьте, что вокруг круга есть большое пустое пространство . Как я могу обрезать его в HTML или CSS?

14
neversaint

Урожай

Вы можете обрезать изображение, используя отрицательные поля и установив размер родительского элемента: 

CSS Показать изображение с измененным размером и обрезать

НО ЭТО IS SVG!

Вы можете не только отображать 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 вы можете просто изменить атрибут viewBox на SVG: 

viewBox="0 0 100 100" 

будет отображать что-нибудь в пределах 0 и 100 единиц х и у

viewBox="-100 -100 100 100" 

Будет отображать что-нибудь от -100 до 100 единиц х & у

viewBox="50 50 500 500" 

Будет отображаться что-нибудь от 50 до 500 единиц х & у

20
Persijn

Ни один из этих ответов (и множество похожих/дубликатов), по-видимому, не полностью отвечал этому и не давал пример.

Шаг за шагом: удалите «отступ» (окружающий пробел) непосредственно в коде SVG

  1. Определите «фактический» размер вашего SVG без заполнения. Для меня это было проще всего сделать с помощью инспектора (Chrome) и навести курсор на элемент path в инспекторе. Вы увидите ширину и высоту, отображаемые рядом с фактическим svg в вашем браузере. 

    • Если есть несколько элементов пути, я обнаружил, что последним часто является «содержащий» элемент.
  2. Теперь отредактируйте svg-код прямо в текстовом редакторе. Вы будете изменять код только внутри тега элемента svg.

    • Измените атрибуты ширины и высоты на «фактические» размеры, которые вы определили на шаге 1.
    • Измените 4 измерения атрибута viewBox. Никаких единиц, хотя, только числа (то есть. 10 не 10px) .
      • Мы начнем с 3-го и 4-го числа, которые снова будут вашими «фактической» шириной и высотой.
      • 1-е и 2-е измерения - это координаты x и y для "Origin" части svg, которая находится внутри viewBox. Соответственно, они будут изменены (с вероятности 0 0) на: половину разницы между начальной шириной и высотой и фактической шириной и высотой. Проще говоря (CSS), ваш левый край и верхний край.

Смущенный? Простой пошаговый пример

Этот пример сделает его чрезвычайно простым и будет использовать 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 x 48, а наши фактические размеры (без заполнения) - 40 x 40. Половина этого различия равна 4 x 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 имеют разные значения для верхнего/нижнего и правого/левого, это не проблема. Просто следуйте приведенным выше стандартным инструкциям, а затем поэкспериментируйте с первыми 2 значениями свойства viewBox, чтобы понять, как эти значения смещают изображение вдоль осей x и y.

Я только что узнал все это сегодня вечером, имея дело с той же проблемой. Полностью открыта для предложений/правок от любого, кто более разбирается в манипулировании масштабируемой векторной графикой, чем я

7
David Rebd

Просто используйте Inkscape .

Сначала я рекомендую прочесть статью Дэвида Ребда о настройке размеров изображения SVG с помощью текстового редактора (такого как Notepad ++).

Затем в Inkscape просто нажмите на элемент, и вы можете буквально установить размеры, даже не беспокоясь о точном перетаскивании мышью.

Если панель инструментов отсутствует, щелкните в меню View, затем Show/Hide и включите панель управления Tools.

 Crop an SVG Image

2
John

Прежде чем пытаться исправить с помощью кода, вы можете попытаться оптимизировать макет SVG. Пустое пространство, видимое в Инспекторе, указывает на то, что SVG не привязан к артборду. Если у вас есть Adobe Illustrator, откройте ваш SVG в этом. Вы должны увидеть что-то похожее на это:

 enter image description here

Белая область - это ваш артборд, круг - ваш SVG. То, что вы хотите сделать, это убедиться, что ваш SVG имеет тот же размер, что и артборд. Эта кнопка позволяет изменить размер артборда:

 enter image description here

Выберите это, выберите белый квадрат, подведите края, чтобы они касались вашего круга, и сохраните SVG.

Другое возможное исправление вашего фактического файла SVG может заключаться в том, что существует обтравочная маска, которая расширяет размер SVG-графики. В этом случае вам нужно будет удалить эти маски, где это возможно. Чтобы узнать, есть ли обтравочная маска, влияющая на ваш SVG, щелкните по кругу. Если окружающий прямоугольник не касается краев вашего круга при выборе, у вас есть обтравочная маска, которая выдвигает границы вашего изображения. 

 enter image description here

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

1
elmarko