Javascript SVG的扩展区域

我对使用SVG还不熟悉，所以我很欣赏大家对这个可能是愚蠢的问题的耐心

我有一个蛋糕形状的SVG图像

代码如下：

<svg version="1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px"
     viewBox="0 0 142 66" enable-background="new 0 0 142 66" xml:space="preserve">
    <linearGradient id="XMLID_115_" gradientUnits="userSpaceOnUse" x1="2e-6" y1="42" x2="142" y2="42">
        <stop offset="0" style="stop-color:#F8E8B9"/>
        <stop offset="50%" style="stop-color:#E6C173"/>
        <stop offset="100%" style="stop-color:#F8E8B9"/>
    </linearGradient>

    <!-- Side of Cake -->
    <path id="XMLID_1_" opacity="1" fill="url(#XMLID_115_)" d="M0,48C0,58,32,66,71,66s71-8,71-18V18
c0,10-32,18-71,18S0,27,0,18L0,48z"/>

    <g id="XMLID_5_">
        <linearGradient id="XMLID_116_" gradientUnits="userSpaceOnUse" x1="71" y1="35" x2="71" y2="9e-13">
            <stop offset="0" style="stop-color:#E6C173;stop-opacity:1"/>
            <stop offset="1" style="stop-color:#F8E8B9"/>
        </linearGradient>

        <!-- Top of Cake -->
        <ellipse id="XMLID_4_" opacity="1" fill="url(#XMLID_116_)" cx="71" cy="18" rx="71" ry="18"/>

    </g>
</svg>

这是在Illustrator中创建和导出的

我想做的是减少宽度，而不是高度。不管它是在JavaScript、CSS还是任何其他方法中

有效地，蛋糕将堆叠起来，同时保持相同的视觉视角

从我收集的信息来看，我只需要延长蛋糕路径一侧的长度（在注释中标记），但我找不到任何方法来这样做。很有可能我的猜测是错的

---

一种简单的方法是在整个SVG元素的CSS中使用

transform:scaleX（）

：

//svg{transform:scaleX（0.6）}
svg{transform:scale（0.6,0.6）}//用于统一缩放

---

您好，我试着用这种方式管理您可以查看

.container{
职位：亲属；
身高：100%；
宽度：100%；
}
#第1层{
位置：绝对位置；
顶部：95px；
}
#第2层{
位置：相对位置；
变换：scaleY（0.7）；
转换：scaleX（0.7）；
}

感谢您的快速回复。这似乎会改变曲线的角度。我现在将更新我的问题，使之更加精确。请参阅我修改后的问题和JSFIDLE。再次感谢您的帮助：）@matt1985如果水平缩放出现问题，我无法理解所需的输出；请更具描述性。水平缩放很好，但我不需要它来改变蛋糕的曲线。当缩小的视图放置在较大的视图的顶部时，它会更改查看透视图，因为曲线已更改。你可以在地图上看到这一点jsfiddle@matt1985如果要保持相同的高度，缩放不能统一。如果您想要均匀缩放，可以使用

transform:scale（0.7,0.7）

谢谢。这看起来好多了。你能解释一下你改变了什么吗？我改变了变换：scaleX（0.7）；要转换：scaleY（0.7）；对于第2层，同样的东西添加到XMLID_1_id元素，也添加到XMLID_4_元素，这样它将在y位置进行缩放vertical@matt1985如果这对你有帮助，你可以投票支持这一点，bdw很荣幸能提供帮助