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:

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

The request method 'PUT' is not currently supported

Currently, I am working on a project that involves springboot, angularjs, and restful services. Here is my REST controller: @RequestMapping(value="/updatestructure/{ch}", method = RequestMethod.PUT) public @ResponseBody Structurenotification updateStruct ...

javascriptangularjsspring-bootspring-data-rest

Issue with resetting the state of a react-select component remains unresolved

I'm currently facing two issues with my react-select component: Firstly, once I select an option, I am unable to change it afterwards. Second, when my form is reset, the react-select component does not reset along with the other fields. For simplici ...

javascriptreactjs

Struggling to align elements in a navbar using HTML and CSS?

Currently, I'm in the process of building a simple website and focusing on customizing the navbar. The logo within the navbar is created using font awesome and text, with a larger font size compared to other elements in the navbar. However, I am facin ...

htmlcss

Using jQuery, check if the input contains any phrases from the array that are suitable for children

I stumbled upon some code designed for a chat system. My plan is to implement it as a child-friendly global chat, so that I can avoid any blame associated with inappropriate content. The basic premise of the code involves checking user input against an arr ...

javascriptjqueryarraysfilterfiltering

Tips for augmenting cell with additional data in react-datepicker

Is it possible to include additional text in a cell using react-datepicker? For example, similar to what is shown in this image: view image here ...

javascriptreact-datepicker

Break down a data structure into a type that includes multiple options

Is it possible for Typescript to support type or interface "destructuring" (if that's the right term)? I am attempting to achieve something similar to the code snippet below: type SomeRandomType = { propertyOne: string; propertyTwo: number; ...

javascripttypescript

When you hover over HTML tables, they dynamically rearrange or shift positions

Issue: I am encountering a problem with multiple tables where, upon hovering over a row, the tables are floating rather than remaining fixed in place. Additionally, when hovering over rows in the first or second table, the other tables start rendering unex ...

javascriptjqueryhtmlcss

What is the method to modify the text of an element without altering its existing properties?

https://i.stack.imgur.com/cBu6P.png $.ajax({ type: "GET", url: "my url" + x, datatype: "html", success: function(data){ //alert(x); //var Content = data; var sendId ; var data = $.parseJSON(data); ...

javascriptjqueryhtmlajax

Block with vertical text covering entire height

I need to place an additional block with 100% height and vertical text (bottom-to-top direction) inside a variable height block, aligning it to the left side without using width and height calculations in JS. Is there a way to achieve this using CSS transf ...

htmlcsscss-transformsvertical-text

The Xero Node OAuth Authorize Callback URL is malfunctioning after granting access

When utilizing the xero-node library to produce a Request Token using the getRequestToken function, the URL provided does not automatically redirect the user to the designated callback address specified in the configuration. Instead, a screen displaying a ...

javascriptnode.jsoauthoauth-2.0xero-api

Unlocking the Mysterious Realm of HTML

I recently stumbled upon a mysterious combination of HTML attributes: <div vanisheffect="true" blinkcolor="red" fadeopacity="0.8"> Have you ever encountered something like this? And more importantly, does it have any impact on specific browsers? Is ...

htmlbrowsercss

How can I expand the notification pop-up in R Shiny?

I'm trying to figure out how to expand the notifications in R Shiny because right now they are cutting off longer error messages. Any suggestions? library(shiny) ui <- fluidPage( actionButton("test", "Test") ) server <- f ...

cssruser-interfaceshiny

JavaScript class syntax allows for the definition of inherited instance fields

In the code snippet below, I have implemented a way to define a prototype with a simple property that can be inherited by objects using the prototype: const SCXMLState = Object.setPrototypeOf( Object.defineProperties({ addChild() { } isStat ...

javascriptes6-class

The dominance of CSS specificity in favor of the flex property compared to flex-basis

Is there a specificity among CSS properties that affects how styles are applied? I've been experimenting with flexbox and encountered an interesting scenario: The second selector .flex-basis-5 is added dynamically via JavaScript based on certain con ...

htmlcssflexboxcss-specificity

When the width of the window is hidden, conceal

My webpage has a carousel with pictures, but on smaller devices, they do not appear properly. I am now trying to figure out how to hide the div if the width is less than 1015px. Here is the code for my div: <html> <body> <div id="myCarou ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can one efficiently update numerous data properties in a Vue.js application?

My information is as follows: data() { return { monday_start: '', monday_end: '', tuesday_start: '', tuesday_end: '', wednesday_start: '', ...

javascriptvue.jsvuetify.js

Can Vuetify's grid system seamlessly integrate with the Bootstrap grid system?

According to information from the Vuetify documentation: The Vuetify grid draws inspiration from the Bootstrap grid. It involves the use of containers, rows, and columns to organize and align content. If I utilize Bootstrap grid classes in a Vuetify pr ...

csstwitter-bootstrapvue.jsbootstrap-4vuetify.js

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

javascriptjquerycss

Formatting numbers in Angular 2 to include a space every three zeros in a money amount

Let's say I have the number 30000 and I want to format it as 30 000. What method should I use to achieve this? Here are more examples: 300000 -> 300 000, 3000000 -> 3 000 000. Just to clarify, this is not about using dots or commas, but rather reco ...

javascriptangulartypescriptinternationalization

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...

javascripthtmlcssreactjsmaterial-ui