После встраивания тега изображения в svg измените размер тега изображения, изображение не будет растягиваться,
Добавьте в тег изображения preserveAspectRatio="none" vector-effect="non-scaling-stroke"
<!DOCTYPE html>
<html>
<body>
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />
<text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text>
<g vector-effect="non-scaling-stroke">
<image
preserveAspectRatio="none" vector-effect="non-scaling-stroke" x="0" y="0" width="300" height="180" xlink:href="http://localhost:8188/api/browserImage?img=20220708031939346.jpg"></image>
</g>
</svg>
</body>
</html>----векторный эффект
vector-effect Атрибут указывает векторный эффект, который будет использоваться при рисовании объекта.Проще говоря, чтобы линии выглядели хорошо, а не становились все больше и меньше.
Инструкции по использованию
| ценить | none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position |
|---|---|
| По умолчанию | none |
| Анимируемость | да |
non-scaling-strokeЧистый визуальный эффект этого значения заключается в том, что ширина обводки не зависит от преобразования элемента (включая неравномерное масштабирование и сдвиговые преобразования) и уровня масштабирования.
-----preserveAspectRatio
Иногда, обычно viewBoxpreserveAspectRatioСвойство, указывающее, применяется ли равномерное масштабирование.
Для всех элементов, поддерживающих этот атрибут (показан выше), за исключением элемента <image>viewBoxviewBox
Для элементов <image> saveAspectRatio указывает, как ссылочное изображение должно вписываться в эталонный прямоугольник и должно ли сохраняться соотношение сторон эталонного изображения относительно текущей пользовательской системы координат.
использование контекста
| Категории | Никто |
|---|---|
| Ценить | <align> [<meetOrSlice>] |
| Анимируемый | Да |
| Нормативный документ | SVG 1.1 (2-е издание) |
<выравнивание>
<align> Значение атрибута указывает, следует ли применять единообразное масштабирование, и используется, когда соотношение сторон атрибута viewbox в SVG не соответствует соотношению сторон атрибута view. Значение атрибута <align> должно быть одним из следующих значений:
- none
не обеспечивает равномерного масштабирования и, при необходимости, масштабирует графическое содержимое указанного элемента так, чтобы границы элемента точно соответствовали прямоугольнику представления.
(Примечание. Если<align>значение равноnone,<meetOrSlice>значение атрибута будет игнорироваться.) - xMinYMin — Принудительное равномерное масштабирование.
Выравнивает минимальное значение X атрибута viewbox элемента SVG с минимальным значением X представления.
Выравнивает минимальное значение Y атрибута viewbox элемента SVG с минимальным значением Y представления. - xMidYMin — Принудительное равномерное масштабирование.
Выравнивает среднее значение X атрибута viewbox элемента SVG со средним значением X представления.
Выравнивает минимальное значение Y атрибута viewbox элемента SVG с минимальным значением Y представления. - xMaxYMin — Принудительное равномерное масштабирование.
Выравнивает минимальное значение X атрибута viewbox элемента SVG + ширину элемента по максимальному значению X представления.
Выравнивает минимальное значение Y атрибута viewbox элемента SVG с минимальным значением Y представления. - xMinYMid — Принудительное равномерное масштабирование.
Выравнивает минимальное значение X атрибута viewbox элемента SVG с минимальным значением X представления.
Выравнивает значение средней точки Y атрибута viewbox элемента SVG со значением средней точки Y представления. - xMidYMid (по умолчанию) — принудительное равномерное масштабирование.
Выравнивает среднее значение X атрибута viewbox элемента SVG со средним значением X представления.
Выравнивает значение средней точки Y атрибута viewbox элемента SVG со значением средней точки Y представления. - xMaxYMid — принудительное равномерное масштабирование.
Выравнивает минимальное значение X атрибута viewbox элемента SVG + ширину элемента по максимальному значению X представления.
Выравнивает значение средней точки Y атрибута viewbox элемента SVG со значением средней точки Y представления. - xMinYMax — Принудительное равномерное масштабирование.
Выравнивает минимальное значение X атрибута viewbox элемента SVG с минимальным значением X представления.
Выравнивает минимальное значение Y атрибута viewbox элемента SVG + высоту элемента по максимальному значению Y представления. - xMidYMax — Принудительное равномерное масштабирование.
Выравнивает среднее значение X атрибута viewbox элемента SVG со средним значением X представления.
Выравнивает минимальное значение Y атрибута viewbox элемента SVG + высоту элемента по максимальному значению Y представления. - xMaxYMax — Принудительное равномерное масштабирование.
Выравнивает минимальное значение X атрибута viewbox элемента SVG + ширину элемента по максимальному значению X представления.
Выравнивает минимальное значение Y атрибута viewbox элемента SVG + высоту элемента по максимальному значению Y представления.
<meetOrSlice>
<meetOrSlice> является необязательным, если он указан, <align> разделен одним или несколькими пробелами, выбранное значение параметра должно быть одним из следующих значений:
- встретиться (по умолчанию) - график приблизится к:
- Соотношение сторон будет сохранено
- Вся область просмотра SVG видна в пределах границ представления.
- Максимально увеличьте масштаб окна просмотра SVG, но при этом соблюдайте другие условия.
- slice — график будет масштабироваться до:
- Соотношение сторон будет сохранено
- Все окно просмотра будет закрывать окно просмотра.
- Атрибут окна просмотра SVG будет максимально уменьшен, но все равно будет соответствовать другим критериям.