Increase the size of the SVG area

I'm still learning how to work with SVGs, so I appreciate your patience as I ask what may seem like a simple question.

Currently, I have an SVG image that resembles a cake shape. See it here: https://i.sstatic.net/tDhUL.png

Take a look at the code:

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

This SVG was designed and exported using Illustrator.

The goal is to reduce the width of the cake shape while maintaining its height. Whether through JavaScript, CSS, or any other means, I want the cakes to stack up but visually remain the same.

My understanding is that adjusting the length of the cake side path (as labeled in comments) should achieve this effect, but I haven't been successful in finding a method to do so. It's possible that my approach is completely off base!

I've created a quick jsfiddle incorporating the CSS solution provided below.

javascriptcsssvg

Answer №1

hi there, I have attempted to organize it in this manner for your review

.container {
    position: 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>

feel free to take a peek at this link

Answer №2

One easy method involves utilizing the transform:scaleX() property in the CSS for the entire SVG element:

//svg{transform:scaleX(0.6)}

 svg{transform:scale(0.6,0.6)}//for uniform scaling
<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add a new key-value pair to each object in an array, with the value generated by making a request using axios.get

Recently, I've been working on a scraper that has been functioning well until I encountered an issue while trying to scrape data for individual links. Let me clarify the situation: The scraper gathers data about apartments from a webpage where articl ...

javascriptnode.jsaxios

Steps for accessing the "this" keyword within the parent function

Struggling with referencing `this` within a parent function while building a basic tab system using AngularJS. It seems like I may not have a solid grasp on the fundamentals, so any guidance would be appreciated: JavaScript: $scope.tabs = { _this: th ...

javascriptangularjs

Pressing the submit button within a form in Ionic2 triggers the Ion-Input onSubmit event

In my form, there is an ion-button and an ion-input included. The ion-button is not meant for submitting the form. When I try to edit a value in the input field and press "ok", I expect the keyboard to hide. However, the ion-button reacts to this event an ...

javascriptiosangularjsionic2

Validation using Joi allows for a field to be optional, but if it is included, it must be a positive integer

I am facing a challenge with a field in my JOI schema that I want to make optional, allowing for both undefined and null values. However, if a value is provided, it must be a positive integer. How can I accomplish this? So far, I have attempted the follow ...

javascriptnode.jsexpressvalidationjoi

Ionic, Angular - A component with two out of three inputs displaying undefined values

I am facing an issue with the @input() in my code. Two out of three inputs have undefined values when I try to use them, although they can be displayed using interpolation in the template file. .ts : export class NoteCanvasPageComponent { @Input() note ...

javascriptangularionic-frameworkinput

AJAX forms and snippets

I have successfully integrated comments into public activity following a tutorial on public activity #406 Public Activity. However, I am facing issues with submitting the comments via ajax. I have gone through several tutorials but haven't been able t ...

javascriptruby-on-railsajax

Tips for personalizing the Material UI autocomplete drop-down menu

I'm currently working with Material UI v5 beta1 and I've been attempting to customize the Autocomplete component. My goal is to change the Typography color on the options from black to white when an item is selected. However, I'm struggling ...

javascriptreactjstypescriptautocompletematerial-ui

Achieving a transparent background in WebGLRender: A guide

I've been experimenting with placing objects in front of CSS3DObjects using the THREE.NoBlending hack. However, in the latest revisions (tested on r65 and r66), I only see the black plane without the CSS3DObject. Here is a small example I created: in ...

javascripthtmlgraphicsthree.js

Using jQuery to include the value of an array index in the output

Looking for guidance on jQuery & JavaScript. I have successfully implemented code that adds a new text input field based on the user's selection from a dropdown select field. <script> $(function() { var input = $('<input placeholder= ...

javascriptjquery

Tips for adjusting the default selection in a second dropdown menu

I have a dilemma with my two dropdown lists, "optionone" and "optiontwo". I am trying to alter the default selected value from "option value=3>3" to option value=3 selected>3 when the user selects 2 from the first dropdown list ("optionone"). <sc ...

javascriptjqueryhtmlajaxforms

I customized the navbar in Bootstrap by centering it with custom CSS, but whenever I click on it, it suddenly shifts to one side. I'm puzzled as to why this is happening and

I attempted to center my navbar-toggler element, but was only successful in centering the navbar-contend using Bootstrap. I then took it a step further by trying to center the navbar-toggler icon with custom CSS, however, it now shifts to the left when cli ...

htmlcssbootstrap-5

Tips for maintaining the integrity of blank space within a text node?

When intercepting a paste event and cleaning HTML off of the content using textNodes, I am faced with an issue where all white space is reduced to a single space and new lines are disregarded. For example, pasting: "hello world !" ends up being "h ...

javascriptjqueryhtmlcssnodes

The handler provided to Boost::asio::async_read_until is never triggered

I am attempting to establish a connection between two computers on a local network. One is using a slightly modified version of the Boost Asio C++ TCP asynchronous server sample, while the other is running NodeJS. tcp_client.js : var net = require(' ...

javascriptc++node.jstcpboost-asio

Losing focus issue with Material-UI TextField occurs constantly with every onChange event

I am in the process of developing a new component: https://i.stack.imgur.com/czM9i.png This component will consist of an array of objects, each representing a prescription. Each object will include the medicine name selected from a dropdown and a text fi ...

javascriptreactjsmaterial-uitextfield

What happens with JQuery if the JQuery IIFE does not get executed properly?

The jquery-3.3.1.js file contains the following code: ( function( global, factory ) { ... } ); Within this Immediately-Invoked Function Expression (IIFE), there is a line allowing for the use of the JQuery and $ variables to call the JQuery function: wi ...

javascriptjquery

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

I am encountering an issue where the width of the div remains the same after it has wrapped, causing overlapping. I want the first div to push the second to the right and so on. When I add a 100% width, it makes the width for the smallest div the same as ...

cssreactjsflexbox

What should I do to resolve the message 'Ignoring invalid configuration option passed to Connection' that I received?

This is the latest message: Warning - Invalid configuration option passed to Connection: createDatabaseTable. Currently a warning, future versions of MySQL2 will throw an error for passing invalid options. The application stops responding after enco ...

javascriptmysqlnode.jsexpresssequelize.js

The dynamics of Express.js functionalities

I am seeking to better understand how flow functions within an Express app using Routes, with the following set of Routes: app.use(require('./routes/reportsRouter')); app.use(require('./routes/crewsRouter')); app.use(require('./ro ...

javascriptnode.jsexpress

The variable remains undefined, despite the fact that the code executes correctly in a different location

I'm currently working on a multiplayer game in three js and integrating socket.io for real-time communication. I have all the player characters stored in an array called players on the server side. When each client connects, I send them the list of p ...

javascriptnode.jssocket.io

What are the best techniques for styling a SELECT box with HTML and CSS?

I've received a form from a talented designer which includes SELECT inputs designed in a unique manner. Despite my attempts to add paddings, adjust backgrounds, I'm unable to replicate the exact appearance of the select box shown in the image. ...

htmlcssselectinput