Question

我是初次使用SVG的人，所以我感谢任何对这个可能是个愚蠢问题的耐心。

我有一个像蛋糕一样的SVG图片。

以下是代码：

function tick(d) {
    node.attr("transform", function(d) {
        var radius = d.children ? 22 : isNaN(parseInt(d.name)) ? 16 : 10;
        d.x = Math.max(radius, Math.min(w - radius, d.x));
        d.y = Math.max(radius, Math.min(sh - radius, d.y));
        return "translate(" + d.x + "," + d.y + ")";
    });

    link.attr("x1", function(d) {
            return d.source.x;
        })
        .attr("y1", function(d) {
            return d.source.y;
        })
        .attr("x2", function(d) {
            return d.target.x;
        })
        .attr("y2", function(d) {
            return d.target.y;
        });
}

这是在Illustrator中创建和导出的。

我想要做的是减少宽度而不是高度。无论是JavaScript，CSS还是其他任何方法都无关紧要。

有效地，蛋糕会堆叠，同时保持相同的视觉效果。

从我收集的内容中，我只需要延长蛋糕路径侧面的长度（在注释中标注），但我无法找到任何方法。我很可能在猜测中离开了！

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

Answer 1

一种简单的方法是在整个SVG元素的CSS中使用transform:scaleX()：

＆＃13;

//svg{transform:scaleX(0.6)}

 svg{transform:scale(0.6,0.6)}//for uniforme scaling

＆＃13;

<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>

＆＃13;

Answer 2

嗨，我试着管理这个，你可以检查

.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

扩展SVG的范围

2 个答案: