javascript - 扩展 SVG 区域

Question

我是 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 还是任何其他方法都没有关系。

实际上，蛋糕会堆叠起来，同时保持相同的视觉视角。

根据我收集到的信息，我只需要延长蛋糕路径边的长度(在注释中标记)，但我无法找到任何方法。很有可能我的猜测有偏差!

I've done up a quick jsfiddle with the CSS from the answer below.

Answer 1

您好，我尝试过这种方式，您可以查看

.container {
    postition: relative;
    height: 100%;
    width: 100%;
}
#Layer_1 {
    position: absolute;
    top: 95px;
}
#Layer_2 {
    position: relative;
    transform: scaleY(0.7);
    transform: scaleX(0.7);    
}

<div class="container">
    <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>
            <stop offset="50%" style="stop-color:#E6C173"></stop>
            <stop offset="100%" style="stop-color:#F8E8B9"></stop>
        </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"></path>

            <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>
                    <stop offset="1" style="stop-color:#F8E8B9"></stop>
                </linearGradient>

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

            </g>
    </svg>

    <svg version="1" id="Layer_2" 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>
            <stop offset="50%" style="stop-color:#E6C173"></stop>
            <stop offset="100%" style="stop-color:#F8E8B9"></stop>
        </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" style="transform: scaleY(0.7);"></path>

            <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>
                    <stop offset="1" style="stop-color:#F8E8B9"></stop>
                </linearGradient>

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

            </g>
    </svg>
</div>

你可以查看这个 Take a Look