Other options for positioning background in SVG or using CSS within SVG could include center center alignment settings

I am currently developing a website where I have a div covered by an SVG. When I use this SVG as a background image and apply background-position: center center, it functions as expected. However, my issue arises when I try to add additional CSS in this manner on smaller screens.

I have attempted to achieve the same effect without using background-image by trying object-fit: cover; object-position: center center, but unfortunately, it didn't work as intended.

The following code works perfectly:

<div style="background-image: {{asset('assets/vectors/bg.svg')}}; height: 100vh; background-position:center center">

However, I would like to accomplish the exact same effect while being able to apply additional CSS to it, like so:

<div>
  <svg>     /* This way I can add extra css styles */
</div
javascripthtmlcsssvg

Answer №1

If you want your SVG to behave a certain way, make sure to set the preserveAspectRatio attribute to xMidYMid slice as shown below:

<svg viewBox="0 0 300 300" preserveAspectRatio="xMidYMid slice">
    <!-- add your code here -->
</svg>

The xMidYMid part in the value ensures that your SVG will be centered both horizontally and vertically within the view box.

On the other hand, the slice part indicates that your SVG will be sliced if it doesn't fit perfectly into the designated position and size of the view box.

To learn more about this attribute, check out this helpful tutorial: Understanding SVG Coordinate Systems and Transformations

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

Issue with React-Toastify not displaying on the screen

After updating from React-Toastify version 7.0.3 to 9.0.3, I encountered an issue where notifications are not rendering at all. Here are the steps I followed: yarn add [email protected] Modified Notification file import React from "react" ...

javascriptreactjstypescriptreact-toastify

What is special about this element, textarea?

Hey there, I've got this JavaScript code that currently works on all textarea elements on the site. However, I'd like it to only work on one specific element. function limits(obj, limit) { var text = $(obj).val(); var str_length = $(obj) ...

javascriptjqueryhtmlthis

Searching and selecting columns in React using Material-UI

Currently, I am using Material-UI data tables and have implemented a search functionality similar to this Codesandbox example, which only searches the Name/Food column. This is my existing code snippet: const [filterFn, setFilterFn] = useState({ fn: items ...

javascriptreactjsmaterial-ui

Choose the span element within every other td that is not enclosed by an anchor tag

The table structure I am working with is as follows: <tr> <td> <a> <span> some content </span> </a> </td> <!-- td having straight span --> <td> <span> ...

javascriptjqueryhtmlcss

How to Dynamically Set AngularJS Filter (like date or currency) Using Variables

When working with Angular, it's possible to easily apply filters to format variables, like so: {{ myDate | date }} {{ myMoney | currency }} But, is there a way to dynamically set the filter type in a more flexible manner as shown below? // controll ...

javascriptangularjs

The jQuery included does not function properly in production mode and results in an error stating that it is not a function

After placing the jquery.placeholder.js file in the assets/javascripts folder, I successfully applied the function in my coffeescript file and it worked perfectly. $(document).ready -> $('input, textarea').placeholder(); However, when swit ...

javascriptjqueryruby-on-railscoffeescript

Incorrect date formatting is being displayed

vr_date :Date alert(this.vr_date ) // Result Displays Thu Feb 07 2019 00:00:00 GMT+0400 var json = JSON.stringify(this.vr_date); alert(json); // Outcome Reveals 2019-02-06T20:00:00.000Z with incorrect date The date output shows 06 instead of 07 on my ...

javascriptangular

Issue with Angular cookies not being able to remove the cookie within a Chrome extension

I am currently developing a Chrome extension that includes login and logout features. After a successful login, the server sends a token that I need to store in a cookie. The process looks like this: function success(response) { if(response.data & ...

javascriptangularjscookiesgoogle-chrome-extension

Eliminate items from a list that have duplicate properties

I have a collection of objects, each with a unique NAME property. However, there are duplicates in the collection where some objects share the same NAME. const arr = [ {name: "x", place: "a", age: "13" }, {name: "x", place: "b", age: "14" }, { ...

javascriptarrayslodash

Using Javascript to organize an array of objects based on a specific condition

Having an array of objects structured as follows: obj = [{'name': 'Tom', 'age': 17, 'gender': 'male', 'color':'red', 'position':3}, {'name': 'Sam', ...

javascriptarrayssortingjavascript-objects

Experimenting with a function that initiates the downloading of a file using jest

I'm currently trying to test a function using the JEST library (I also have enzyme in my project), but I've hit a wall. To summarize, this function is used to export data that has been prepared beforehand. I manipulate some data and then pass it ...

javascripttypescriptunit-testingtestingjestjs

Encountering a problem while creating a Page Object in webdriver.io - getting the error "setValue is not a function" or "cannot read property 'setValue' of undefined"

While working on a webdriver.io automation project, I encountered an issue with recognizing objects in my page object file (login.po.js) when calling them in the test spec file (test.spec.js). The error message displayed is LoginPage.username.setValue is n ...

javascriptseleniummocha.jswebdriver-iowebautomation

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

Transforming JSON information into a Backbone Model accompanied by a child Collection

Currently, I am dealing with a Playlist object that comes with various properties to define itself, along with a collection of PlaylistItems. Upon receiving data from the server, the JSON response is processed in the client-side success method: success: ...

javascriptjsonbackbone.js

Tips for creating a filter that meets multiple conditions in HTML

Click here for image descriptionI have the following code where I am utilizing story owner and story state. ng-repeat="item in IterationStories | filter: {Story: {storyOwner: filterRequestor}} | filter: {Story: {state: filterKey}} " //works fine when ...

angularjshtml

What is the best way to anchor an image to the bottom right corner while also adjusting its position as

Hey there! I have a challenge where I want to anchor an image at the bottom right corner of a webpage. Initially, it works perfectly using this CSS: .logo img{ position: absolute; bottom: 0; right: 0; } However, when I resize the window, the ...

htmlcssimage

What could be causing the issue of PHP not receiving this multidimensional array through Ajax?

Having an issue with receiving a multidimensional array in PHP after posting it from JS using Ajax: $.ajax({ type: 'post', url: 'external_submit.php', dataType: "json", data: { edit_rfid_changes_submit ...

javascriptphparraysajax

Issue with onDblClick event in Angular5 and PrimeNG's p-listbox

I encountered an issue while using p-listbox's onDblClick event as it does not return the selected list element. Instead, the event object only contains the value of 'this'. {"originalEvent":{"isTrusted":true}} HTML Blockquote <!-- S ...

javascriptangularprimeng

VSCode API alerts user when a rejected promise is left unhandled for more than a second

After working diligently on developing my first vscode extension, I encountered a roadblock when the debugger halted the execution of my extension. As a newcomer to JavaScript, I suspect that I may be overlooking something related to "thenables" that is c ...

javascriptapivisual-studio-codevscode-extensions

JQuery Mobile: Adding fresh, dynamic content - CSS fails to take effect

I've encountered this issue before, but I'm still struggling to resolve it. When adding dynamic content to a page (specifically a list-view), the CSS seems to disappear once the content is added. I've tried using the trigger("create") functi ...

javascriptjquerycssjquery-mobile