Chrome has some issues with resizing the SVG Pattern element

Utilizing inline svgs, I have a svg circle filled with a pattern that should cover 100% of the container size. However, when the parent element is resized via JavaScript, the pattern no longer reflects the 100% width and height as expected. This issue seems to only occur in browsers other than Firefox.

It appears that the CSS does not update properly when the parent element's dimensions change. Interestingly, manually adjusting the value to 99% prompts Chrome to update the size correctly on both dimensions.

The structure of my SVG is as follows:

<div style="height:150px; width:150px;">
  <svg style="height:100%; width:100%;">
    <defs>
       <pattern id="image" x="0%" y="0%" width="100%" height="100%">
         <image x="0%" y="0%" width="58%" height="58%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image.jpg"></image>
       </pattern>
    </defs>
    <circle cx="50%" cy="50%" r="29%" fill="url(#image)">
    </circle>

    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#other"></use>
  </svg>
<div>

I have come across similar questions, but unfortunately without a solution:

Image inside svg pattern is blurried after zoom in Chrome (involving blurry images)

SVG <pattern> won't load when generated by Javascript (the question was closed without a satisfactory answer)

javascripthtmlcssgoogle-chromesvg

Answer №1

To properly scale an SVG, make sure to include the viewBox property. Here is a helpful resource for reference: https://css-tricks.com/scale-svg/

Check out the updated code below:

function increaseSize(){
var parent = document.getElementById('parent');
parent.style.width = '350px';
parent.style.height = '350px';

}
<div id='parent' style="height:150px; width:150px;">
  <svg style="height:100%; width:100%;" viewBox="0 0 50 50">
    <defs>
       <pattern id="image" x="0%" y="0%" width="100%" height="100%">
         <image x="0%" y="0%" width="58%" height="58%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image.jpg"></image>
       </pattern>
    </defs>
    <circle cx="50%" cy="50%" r="29%" fill="url(#image)">
    </circle>

    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#other"></use>
  </svg>
<div>

<a href="#" onclick="increaseSize()">Click here to Increase Size</a>

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

What is the process for displaying data within an Angular 10 component?

As I embark on my journey with Angular 10, my goal is to display the current user in the profile.component.html and the navbar in app.component.html. Below you will find the relevant code snippets: users.ts export interface User { username : string ...

htmlnode.jsangularangular10

What causes the timer to pause, and what steps can be taken to avoid it? (Using Javascript with Iframe)

On my website, I have a page where clients must view an advertisement for 20 seconds. The website is displayed in an iframe with a countdown timer above it. I've set it up so that the timer stops when the window loses focus to ensure the client is ac ...

javascripthtmliframetimercountdown

Creating dynamic input forms in PHP

New to PHP and seeking guidance! I'm in the process of creating a photography website and encountering an issue with a specific page. Essentially, I need this page to display a form with a varying number of inputs. The goal is to have a dynamic visua ...

javascriptphphtmlforms

The alignment of unordered lists can be modified

Having a bit of an issue with positioning/resizing UL lists. I have <li> tags with varying heights but the same width. I want to adjust their position so there is no blank space between them when resizing the window, ensuring they are always close t ...

javascriptjqueryhtmlcss

Error thrown when attempting to access properties of null values (Uncaught TypeError: Cannot read properties of undefined (reading 'map'))

import React, { useState, useEffect } from "react"; import { TaskLists } from "./TaskLists"; import { Daycard } from "./daycard"; import { getTasks, deleteTask } from "../api/task.api"; export function TaskManager() { const [tasks, setTasks] = useState( ...

javascriptreactjsstate

Tips for validating updates in MongooseEnsuring data integrity is

My current Schema does not validate upon updating. Can you please point out where I went wrong and help me fix it? ...

javascriptnode.jsmongoose

What is the process of querying both a collection and a subcollection in Firebase using AngularFire?

I have a structure in my firebase database that looks like this: /profiles/{uid}/displayName /email /otherAttribues /roles/{roleName}/someAttribute /someOtherAttribute The reason ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

You cannot click on a React subcomponent

I am currently working on implementing a "Title" component within a header. The idea is that when you click on the title component, a header will appear with various buttons for formatting options such as bold and underline. This concept was inspired by a ...

javascriptreactjsmaterial-ui

Tips for creating a filter in React JS using checkboxes

In my current situation, I have a constant that will eventually be replaced with an API. For now, it resembles the future API in the following way: const foo = { {'id':1, 'price':200, 'type':1,}, {'id':2, &apo ...

javascriptreactjs

Setting radio button values according to dropdown selection - a beginner's guide

I am trying to dynamically set the default values of radio buttons based on the selection made in a drop-down menu. For example, if option A or B is chosen, I want the radio button value to default to "Summary", and if option C is chosen, I want the value ...

javascriptangularjskendo-ui

Ways to incorporate a tertiary tier in my CSS dropdown navigation

I currently have a CSS code that displays a two-level menu, but I'm looking to expand it to include a third level. Unfortunately, I'm stuck and unsure of what changes to make in the CSS. Below is the existing code: #topnav{ // Existing CSS p ...

phphtmlcssweb

CKEditor directive in AngularJS does not properly enforce the maxlength attribute in textarea

I am currently working on an AngularJS application with the CKEditor plugin. I have created a directive for CKEditor and everything seems to be functioning properly. However, I am facing an issue where I need to limit the character length to 50. I tried us ...

javascriptangularjsangularjs-directiveckeditormaxlength

The Heroku application is rendering with different CSS and positioning compared to the local development environment

My locally hosted site has correct CSS and positioning, but once deployed to Heroku, it appears to lose some of its CSS styles. I am using the MERN Stack for this project. I suspect that the issue may be related to my node_modules, even though I have them ...

cssnode.jsreactjsherokubootstrap-4

Clicking on an item will now automatically remove it from the selection, rather than requiring you to click on a specific

Is there a way to customize the design of select2 items in a multi-select box so that users can easily remove selected items by clicking anywhere on the button, rather than just the small "cross" icon on the left-hand side? Refer to the image; instead of n ...

javascriptjqueryjquery-select2

Having difficulty applying parseFloat directly following a JSON Stringify operation

There's a specific line of code I'm working with that reads -- let longitude = JSON.stringify(place.lon); After calling alert(longitude), I receive the output "44.54321". However, my intention is to retrieve just the number itself, so I attempt ...

javascriptjsonstringify

Lazy Loading fails to deliver for Ajax Requests

I recently integrated lazy loading following David Walsh's advice (tip 1) and it initially worked perfectly. However, I encountered an issue when the images were filtered and reloaded with an ajax request. The website is built on Rails, and the images ...

javascriptjqueryruby-on-railsajaxlazy-loading

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

javascripthtmlcss

Responsive Design and Advertising with CSS Media Queries

For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...

csstwitter-bootstrapresponsive-designadsbanner-ads

Loop through and display content on the webpage with a for loop

I'm attempting to create a loop that will display information in three different areas of the DOM. Essentially, I have an array of enemies and I want to randomly select three of them to display in separate HTML div classes (firstEnemy, secondEnemy, th ...

javascriptarraysdom

ensuring that all items in the owl Carousel have equal heights

My current project involves creating an Owl Carousel. Here is the code I have implemented so far: <div class="owl-carousel owl-theme"> @foreach (var item in Model.Books) { <div class="item"> ...

htmlcssbootstrap-4owl-carouselowl-carousel-2