Can anyone assist me in repositioning the smoke group origin to the center so that it scales along with the rocket?
I've attempted utilizing the following:
transform-origin: center; translate-box: box-fill;
but it doesn't seem to resolve the issue.
Click here to view the code: https://codepen.io/paulsanti/pen/eYydYgN
To customize the transform-origin, you can specify a precise 3-axis px position like this:
<g id="smoke" style="transform-origin: 761px 491px 0px">
Keep in mind that the value of 761px is in SVG units within the coordinate system of this SVG's viewBox, not in actual display pixels. The displayed width will vary based on the scale it's viewed at, but there's no need to be concerned about that.
.
With a viewBox of 0 0 1512 982 for your SVG, the center point is x: 1512/2, y: 982/2.
(To align the origin with the lower section of the rocket for your smoke animation, consider adjusting the origin down by about 120 units to
transform-origin: 761px 610px 0pxOrigin was mistakenly spelled incorrectly. The correct spelling is transform-origin.
I've been attempting to change the background image on scroll, but I haven't had any luck finding a guide. So, I'm hoping someone here can help me out. I found a video that showcases exactly what I'm trying to accomplish - https://www.y ...
This is the code snippet I am working with: <form> <table> <tr> <td>Month</td> <td> <select name=""> <option value="">January</optio ...
I've previously reported this error without success, so I'm providing more details now. I am new to coding and recently started a Django & Python project, but encountered some issues. Despite three weeks of troubleshooting, the problems persist. ...
I am facing an issue where the field shrinks drastically when I type in it. Here's a code snippet that showcases this problem: $(function() { $("select").select2({ placeholder: "Select a word", width: "100%" }); }); <link rel ...
I am hoping to maintain the current box size and borders, but I want to add a touch of color. Specifically, I would like to have a red line running through the center of the box without coloring the entire background. Although I know one way to achieve thi ...
After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...
Implementing an MTN Momo and Orange Money payment system through their respective APIs is crucial. In addition, I am seeking a dependable and effective method to seamlessly integrate these diverse APIs. During my attempt to incorporate the API via their ...
Upon reaching the final page of my Angular project, I have an array filled with data retrieved from a database. How can I utilize pdfmake to import this data into a PDF file? My goal is to display a table where the first column shows interv.code and the ...
I am currently working on a mini chat application. The messages in the list are appearing side by side and I would like them to be displayed one below the other. Is there a way to adjust the CSS or add classes to achieve this? <div style="height:100% ...
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> ...
Here's a snippet of my JavaScript code: surveyBusy.show(); $.getJSON(apiUrl + '/' + id) .done(function (data) { ... surveyBusy.hide(); }) .fail(function (jqXHR, textStatus, err) { ... surveyBusy. ...
I'm fairly new to Vue and I'm looking to generate buttons based on my data and show their information when clicked. The 'pets' object contains keys for id and info. (My actual data is more extensive and my code is a bit more complex, bu ...
In Internet Explorer, we are facing an issue with a multiline textarea. After setting the content using JavaScript and checking it, everything appears correct without any additional carriage returns in the textarea: document.getElementById( 'text-ar ...
My CSS skills are still in the beginner stage and I am currently struggling to troubleshoot an issue with my code. The HTML: <div id="loginForm"> <span class="dottedLink"><a href="resetlogin">Recover login details</a></span ...
I am currently developing my first web application. I require a basic form for users to input a few values. Although I have successfully implemented it, I would prefer the data entry fields to be arranged in a row instead of a column. The snippets below s ...
While working on my project, I included custom .woff fonts using @font-face and stored them in my src folder. Surprisingly, the fonts displayed correctly when running the app locally. However, upon deploying the app to the live domain, Chrome and Firefox ...
I've been seeing a lot of recommendations online about using Angular Material for creating a sidebar, but I'm hesitant to install an entire library just for one component. After following the instructions provided here, I managed to develop a si ...
Is it possible to pre-fill a checkbox in an HTML form using the URL? For example, if we have a URL like www.example.com/?itemname=sth Would there be a similar method to pre-select a checkbox via the URL? <ul class="list-group"> <li c ...
I have included an audio on my page which is causing it to load slowly. Below is the code snippet I am using: <div style="margin-left: 160px;"> <audio controls id="audio"> <source src="" type=&q ...
I have a collection of images all the same size, and I want them to be overlaid on top of each other. I've tried setting the position of the images to absolute, but this causes an issue with the container not adjusting its size accordingly. Additiona ...