Question

我想在SVG文件中创建一个视口，其中20％取出两个边，一个垂直，另一个水平，其中20％是宽度和高度的最小值。因此，如果图像比高图像宽，则视口将是高度的80％和宽度的80％以上。如果图像高于宽度，则视口将是宽度的80％和高度的80％以上。如果图像是方形，则视口将是宽度和高度的80％。即视口和外边缘之间图像内的角落始终为正方形，该正方形的大小始终为高度和宽度最小值的20％。甚至可以这样做吗？

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M 0,0 L 0,400 L 600,400 L 600,0 z" fill="blue"/>
  <svg x="0" y="0" width="80%" height="80%">
    <path d="M 0,0 L 0,400 L 600,400 L 600,0 z" fill="red"/>
    <path d="M 150,50 L 430,220 L 50,270 z" fill="green"/>
  </svg>
</svg>

这是我到目前为止所得到的，但显然内部视口有宽度和高度的80％（480x320）。我希望它最初是520x320但是w1 - w2 == h1 - h2始终是真的。我希望绿色三角形在任何留给它的空间内缩放（即不保留纵横比）。

Answer 1

你可以做你想做的事，但你需要使用Javascript。

＆＃13;

// Get pointers to the outer and inner SVG elements
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

// Get the dimensions of the outer SVG
var outerW = outer.width.baseVal.value;
var outerH = outer.height.baseVal.value;

// Find the minimum of the width and height and calculate what 20% of it is
var diff = Math.min(outerW, outerH) * 0.2;

// Adjust the size of the inner SVG
inner.setAttribute("width", outerW - diff);
inner.setAttribute("height", outerH - diff);

＆＃13;

<svg id="outer" width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M 0,0 L 0,400 L 600,400 L 600,0 z" fill="blue"/>
  <svg id="inner" x="0" y="0" viewBox="0 0 600 400" preserveAspectRatio="none">
    <path d="M 0,0 L 0,400 L 600,400 L 600,0 z" fill="red"/>
    <path d="M 150,50 L 430,220 L 50,270 z" fill="green"/>
  </svg>
</svg>

＆＃13;

如果您希望缩放或拉伸，内部SVG需要viewBox。如果你想让它的内容拉伸以固定520x320尺寸，那么你需要像我上面那样设置preserveAspectRatio="none"。

是否可以使用宽度和高度的最小值的百分比在SVG中创建视口？

1 个答案: