Question

我正在尝试构建一个可以水平和流畅地缩放的svg，类似于旧的表格切片图像，用于在页面顶部流畅地缩放标题。通常，这要求末端部件在中心部件伸展（或重复）时不伸展。我在下面列出了一个示例图片。我已尝试使用嵌套的svg标签与viewBox和preserveAspectRatio结合使用各种配置，但无法使其正常工作。

Fuild Horizontal Scaling Diagram

以下是我需要做的一个工作示例，纯html / css：http://plnkr.co/edit/cSHBV27fL6k2m67FgwlA?p=preview

甚至可以用一个独立的svg来做这件事，还是我在浪费时间？

Answer 1

我回答这个问题是因为我必须做类似的事情。

是，您只需 SVG 即可。关键属性为viewBox和preserveAspectRatio。 preserveAspectRatio="xMaxYMid"将矩形保持在右侧，xMinYMid将矩形保持在左侧。将viewBox设置为末尾所需的矩形大小。

已在Chrome，Firefox和IE中测试过。

这是plunker demo。

请注意，如果将svg的高度更改为100％而不是20px，则可以使用包含html div的图像缩放。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg width="100%" height="20px" version="1.0" state='normal'
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">


    <defs>

        <!-- The right head --> 
        <svg class='head input-source' id='right' 
            height="100%"
            width='100%' 
            viewBox="0 0 15 30"
            preserveAspectRatio="xMaxYMid"
            >
            <rect width="100%" height="100%"/>
        </svg>

        <!-- The left head --> 
        <svg class='head input-source' id='left' 
            height="100%"
            width='100%' 
            viewBox="0 0 15 30"
            preserveAspectRatio="xMinYMid"
            >
            <rect width="100%" height="100%"/>
        </svg>

    </defs>

    <svg
        class='input-source'
        stroke='black'
        stroke-width='0'
        fill="green">
        <rect  x="2" y="20%" width="100%" height="60%" 
            stroke='black'
            stroke-width='0'
        >
        </rect>
        <use xlink:href='#right'/>
        <use xlink:href='#left'/>
    </svg>   
</svg>

Answer 2

使用foreignObject实际上没有Javascript是可能的。但它不适用于Internet Explorer，bcs。 IE不支持foreignObject。请参阅http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/

上的文章

Answer 3

如果你可以将每个svg放在DIV中，它的大小将决定它的svg。但是，svg大小必须是百分比。对于复杂的svg来说，这可能不适合你，一切都是“漂浮”

简单的矩形示例如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
DIV width=400px height=100px:
<div  style='width:400px;height:100px;'>
<svg id="mySVG1" width="100%" height="100%">
<rect x=0 y=0 width="20%" height="100%" fill='lightBlue' stroke="black" stroke-width="1" />
<rect x="20%" y="20%" width="60%" height="60%" fill='lightBlue'  stroke="black" stroke-width="1" />
<rect x="80%" y="0%" width="20%" height="100%" fill='lightBlue'  stroke="black" stroke-width="1" />
</svg>
</div>
<br />No DIV<br />
<svg id="mySVG2" width="100%" height="100%" >
<rect x=0 y=0 width="20%" height="100%" fill='lightBlue' stroke="black" stroke-width="1" />
<rect x="20%" y="20%" width="60%" height="60%" fill='lightBlue'  stroke="black" stroke-width="1" />
<rect x="80%" y="0%" width="20%" height="100%" fill='lightBlue'  stroke="black" stroke-width="1" />
</svg>
<br />DIV width=300px height=50px:
<div  style='width:300px;height:50px;'>
<svg id="mySVG2" width="100%" height="100%" >
<rect x=0 y=0 width="20%" height="100%" fill='lightBlue' stroke="black" stroke-width="1" />
<rect x="20%" y="20%" width="60%" height="60%" fill='lightBlue'  stroke="black" stroke-width="1" />
<rect x="80%" y="0%" width="20%" height="100%" fill='lightBlue'  stroke="black" stroke-width="1" />
</svg>
</div>
 </center>
</body>
</html>

Answer 4

这是一个Javascript意味着根据svg宽度调整矩形。抱歉，我无法创建CSS方法。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<svg  width="200" height="40">
<rect id="leftAnchoRect" x="0" y="0" fill=blue stroke='black' stroke-width="1" width="40" height="40" />
<rect id="centerExpandRect" fill=lightBlue stroke='black' stroke-width="1" x=40  y=10  height="20" />
<rect id="floatRightRect" fill=red stroke='black' stroke-width="1" y="0" width="40" height="40" />
</svg>
<br />
<svg  width="250" height="40">
<rect id="leftAnchoRect" x="0" y="0" fill=blue stroke='black' stroke-width="1" width="40" height="40" />
<rect id="centerExpandRect" fill=lightBlue stroke='black' stroke-width="1" x=40  y=10  height="20" />
<rect id="floatRightRect" fill=red stroke='black' stroke-width="1" y="0" width="40" height="40" />
</svg>
<br />
<svg  width="300" height="40">
<rect id="leftAnchoRect" x="0" y="0" fill=blue stroke='black' stroke-width="1" width="40" height="40" />
<rect id="centerExpandRect" fill=lightBlue stroke='black' stroke-width="1" x=40  y=10  height="20" />
<rect id="floatRightRect" fill=red stroke='black' stroke-width="1" y="0" width="40" height="40" />
</svg>
<br />
<svg  width="500" height="40">
<rect id="leftAnchoRect" x="0" y="0" fill=blue stroke='black' stroke-width="1" width="40" height="40" />
<rect id="centerExpandRect" fill=lightBlue stroke='black' stroke-width="1" x=40  y=10  height="20" />
<rect id="floatRightRect" fill=red stroke='black' stroke-width="1" y="0" width="40" height="40" />
</svg>
<br />
</center>
<script id=myScript>
document.addEventListener("onload",adjustRects(),false)
function adjustRects()
{
    var svgElems=document.getElementsByTagName("svg")
    for(var k=0;k<svgElems.length;k++)
    {
        var svg=svgElems[k]
        var rects=svg.getElementsByTagName("rect")
        var midRect=rects[1]
        var rightRect=rects[2]

        var svgWidth=parseInt(svg.getAttribute("width"))
        var midWidth=svgWidth-80
        var floatX=svgWidth-40
        midRect.setAttribute("width",midWidth)
        rightRect.setAttribute("x",floatX)
    }
}
</script>
</body>
</html>

可以构建一个具有流畅水平缩放的svg，类似于旧的table-slice方法？

4 个答案: