以不同方式缩放SVG文件的不同部分

我需要一个可变高度的svg图形的票锯齿边缘。顶部和底部段应按大小缩放，保持固定的纵横比，而中间段应拉伸以适应容器的大小

这个图像应该是说明性的

我发现做了很多我想做的事情，只是水平的而不是垂直的，但我对viewbox不够精通，无法理解正在发生的事情，并根据我的需要调整它。我只是把我的文件弄乱了

我的svg文件目前非常简单；顶部路径，底部路径和中间的RCT。看起来是这样的：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="464px" height="464px" viewBox="0 0 464 464" enable-background="new 0 0 464 464" xml:space="preserve">
    <path fill="#FFF100" d="M432.846,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839
        c0.057,5.754-4.563,10.465-10.316,10.522c-5.755,0.057-10.466-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.843
        c0.058,5.754-4.561,10.465-10.315,10.522S339.021,5.96,338.965,0.206c0-0.069,0-0.137,0-0.206h-20.836
        c0.057,5.754-4.562,10.465-10.316,10.522c-5.754,0.057-10.465-4.562-10.522-10.316c0-0.069,0-0.137,0-0.206h-20.437
        c0,24.772-20.082,44.853-44.854,44.853c-24.771,0-44.853-20.081-44.853-44.853H166.71c0.056,5.754-4.562,10.465-10.317,10.522
        c-5.754,0.057-10.465-4.562-10.521-10.316c-0.001-0.069-0.001-0.137,0-0.206h-20.839c0.098,5.754-4.486,10.498-10.24,10.596
        c-5.754,0.099-10.498-4.486-10.596-10.24c-0.002-0.119-0.002-0.238,0-0.356H83.355c0.057,5.754-4.563,10.465-10.317,10.522
        S62.573,5.96,62.517,0.206c0-0.069,0-0.137,0-0.206H41.677c0.057,5.754-4.562,10.465-10.316,10.522
        C25.607,10.579,20.896,5.96,20.839,0.206c-0.001-0.069-0.001-0.137,0-0.206H0v56h464V0h-20.839
        C443.219,5.754,438.6,10.465,432.846,10.522z"/>
    <path fill="#FFF100" d="M432.846,453.478c-5.755-0.056-10.466,4.563-10.522,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839
        c0.057-5.754-4.563-10.466-10.316-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.843
        c0.058-5.754-4.561-10.466-10.315-10.522c-5.755-0.056-10.466,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.836
        c0.057-5.754-4.562-10.466-10.316-10.522c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205h-20.437
        c0-24.771-20.082-44.854-44.854-44.854c-24.771,0-44.853,20.082-44.853,44.854H166.71c0.056-5.754-4.562-10.466-10.317-10.522
        c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205h-20.839c0.098-5.754-4.487-10.498-10.24-10.597
        c-5.754-0.098-10.498,4.486-10.596,10.24c-0.002,0.119-0.002,0.238,0,0.356H83.355c0.057-5.754-4.563-10.466-10.317-10.522
        c-5.754-0.056-10.465,4.563-10.522,10.317c0,0.068,0,0.137,0,0.205H41.677c0.057-5.754-4.562-10.466-10.316-10.522
        c-5.754-0.056-10.465,4.563-10.521,10.317c-0.001,0.068-0.001,0.137,0,0.205H0v-56h464v56h-20.839
        C443.219,458.246,438.6,453.534,432.846,453.478z"/>
    <rect y="56" fill="#00AEEF" width="464" height="352"/>
</svg>

---

如果有人能帮助我，我会非常高兴。

一般来说，SVG的某些部分不能与其他部分进行不同的缩放。然而，在一些简单的情况下（比如你链接到的铅笔图像），你可以巧妙地构建一个有效的

那支铅笔的工作原理

它首先为铅笔的三个部分定义一个

元素：铅笔头、铅笔体和铅笔尖

然后，它通过添加三个子

元素来组合它们。在后面是车身，车身延伸到主车身的整个宽度。然后将两个端盖

元件放置在前面。每个端盖

占据一半宽度。但它们具有“preserveAspectRatio”属性，这导致它们分别与左端和右端对齐

如果我们使两个端部几乎完全半透明，您可以看到发生了什么：

：选中~svg{
宽度：500px；
}

然后，如果您想以艰难的方式完成，您可以使用JavaScript：

$（“输入#调整大小”）。在（“单击”，函数（）{
if（$（“输入#调整大小：选中”）.length）{
scaleSvgBorder（）；
}
});
函数scaleSvgBorder（）{
if（$（（$svg#myFancyBorder”）.length&$（$svg#myFancyBorder”）.height（）>0）{
//首先，我们需要SVG网格和我们喜爱的HTML像素之间的比率。
var svgRatio=$（“svg#myFancyBorder”）.height（）/$（“svg#myFancyBorder”）.attr（“viewBox”）.split（“”[3]；
//接下来，我们需要弄清楚在SVG中的sides组上应用哪个比例。
//我们通过计算我们想要的边的高度（以像素为单位），然后除以边的当前高度（以像素为单位）。
var sidesCurrentHeightPx=$（“svg#myFancyBorder#sides”）[0].getBBox（）.height*svgRatio；
//让我们从容器高度中减去边框的顶部和底部，以获得我们希望边的高度（以像素为单位）。
var nonScalingPartsHeightPx=（$（$（$）svg#myFancyBorder#top）[0].getBBox（）.height+$（$）svg#myFancyBorder#bottom）[0].getBBox（）.height）*svgRatio；
var sidesTargetHeightPx=$（“#容器”）.height（）-非缩放部件heightpx；
//最后，我们有比例！
var scaleRatio=侧面开始高度px/侧面剩余高度tpx；
//我们需要从顶部减去缩放的顶部以进行额外的边平移变换，因为它们将移动，因为SVG从0，0开始缩放！
var scaledTopDifference=$（（svg#myFancyBorder#top）[0].getBBox（）.height-（$（（svg#myFancyBorder#top）[0].getBBox（）.height*scaleRatio）；
//我们需要从底部平移的边中减去缩放的边，因为SVG从0，0开始缩放！
var scaledSidesDifference=$（“svg#MyFancyOrder#sides”）[0]。getBBox（）.height-（$（（“svg#MyFancyOrder#sides”）[0]。getBBox（）.height*scaleRatio）；
//请注意，如果我们将其放置在缩放变换之后，则必须将缩放比率应用于平移变换！！！
$（“svg#myFancyBorder#sides”）.attr（“转换”、“缩放（1）”+scaleRatio+”）转换（0、+（缩放的视差/缩放）+”）；
//*-1，因为它必须向下移动。
$（“svg#myFancyBorder#bottom”）.attr（“transform”、“translate（0）”+（scaledSidesDifference*-1）+”）；
//让我们也将viewbox拉伸到容器的高度！
$（“svg#myFancyBorder”）.attr（'viewBox'，“0 0”+$（'svg#myFancyBorder”）.attr（'viewBox”）.split（“”[2]+“”+（$（“#容器”）.height（）/svgRatio））；
}
}

#容器{
位置：相对位置；
宽度：200px；
高度：400px；
背景色：#cde
}
svg#myFancyBorder{
位置：绝对位置；
宽度：100%；
高度：自动；
}

将边框安装到容器上