Question

I have a <div> container of variable width, and also a <svg> of variable size contained within it.

The div is variable because it is based on window size. The svg is variable because it is defined by user input.

I'd like to scale the SVG such that it is entirely visible within the containing div, without the div cropping the svg, or with excess whitespace. Is there a method to do this?

Thank you very much!

Example: https://jsfiddle.net/5zq0bhu7/1/

Answer 1

您可能正在寻找的是viewBox属性，它定义了图形的边界以及它在容器内的缩放方式。您可以调用svg.getBBox()来获取SVG内部路径的粗略大小。

结果如下：

var svg = document.querySelector("svg");

// Get internal size of SVG
var bbox = svg.getBBox();

// Construct and set a viewBox for the SVG
var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");

svg.setAttribute("viewBox", viewBox);

<div id="drawing" style="border: 1px solid black; width: 200px; height: 200px;">
    <!-- width and height will vary in the application, but are defined here for debugging purposes -->
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="none">
        <g fill="none" stroke="#000">
            <path stroke-width=".26458" d="M8.134 1.4a13.23 13.23 0 0 1 10.006 0M12.852.417a.285.285 0 1 1 .57 0 .285.285 0 1 1-.57 0M22.4 4.202a13.23 13.23 0 0 1 3.964 9.188M20.13 6.882a3.44 3.44 0 1 1 2.725 6.32 3.44 3.44 0 1 1-2.726-6.32m6.234 6.508" />
            <path stroke-width=".26458" d="M25.81 17.44a13.23 13.23 0 0 1-.017.057 6.216 6.216 0 1 0-8.076 8.56 13.23 13.23 0 0 1-.056.02M23.64 22.7a.622.622 0 1 1-.853.903.622.622 0 1 1 .853-.904m-5.977 3.378" />
            <path stroke-width=".26458" d="M12.624 26.866a13.23 13.23 0 0 1-.058-.003A6.216 6.216 0 1 0 2.26 21.177a13.23 13.23 0 0 1-.033-.048" />
            <path stroke-width=".26458" d="M.208 16.447a13.23 13.23 0 0 1-.013-.057A6.216 6.216 0 1 0 3.13 4.992a13.23 13.23 0 0 1 .04-.044" />
        </g>
    </svg>
</div>

它在容器中完全可见，并且不会被裁剪。多余的空白被积极地缩小。以下是设置的每个属性的快速概述：

viewBox控制容器缩放，通过调用getBBox()
width和height强制图形填充其容器
preserveAspectRatio到none以允许SVG扩展以适合任何容器 - 删除此属性以强制执行相同的宽高比 - 默认情况下，SVG将填充最大的可用维度。

How do I scale and center an inline SVG?

1 个答案: