Trouble with IE9: SVG not responding to CSS for resizing

Let's dive in:

Welcome to my website:

In the Firefox browser, you may have noticed a small red icon in the top right corner of each of the six white panels (svg). The original size of this image is 640 by 480. However, due to a CSS rule, the size of the img tag containing the SVG is altered.

The issue arises when using IE9 as it does not properly resize the icon according to the CSS rule; instead, it clips the top left part of it. Adjusting the CSS rule with IE9 Developer Tools will make it evident.

Despite following various SVG best practices such as including specific width and height values rather than just percentages, adding a viewport, and more, the problem persists. IE9 still cuts off the icon instead of scaling it as intended.

Any assistance would be greatly appreciated!

Update Problem solved! It turns out that I had forgotten to include the viewport. Lesson learned: no more coding late at night.

csshtmlinternet-explorersvg

Answer №1

Have you connected the svg file? See below for an example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
insert your svg code here
</svg>

I also faced some challenges with svgs on ie9 :)

If it helps, this was the error message I received while viewing the page:

SCRIPT438: Object doesn't support property or method 'addEventListener'
followbar.js, line 3 character 3

For further clarification on the two dots mentioned in the comments, refer to this example: 

<img class="theme-icon" id="/recruitment-and-retention" src="../images/recruitment-and-retention.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

Enhance your Rails application with the power of HTML5 validation and JavaScript

In my Rails application, I am facing an issue with the validation form for matching email addresses. Despite showing an error below the form when the email addresses do not match, the form still submits and proceeds to the next page. validations.js if (r ...

javascripthtmlruby-on-rails

What is the process for adding color to HTML elements?

Is there a way to assign unique random colors to each individual p tag in ReactJS? function App() { return ( <div> <p style={{ color: "#7fbd73" }}>Hi</p> <p style={{ color: "#3a82e4" }}>Hello</p> < ...

htmlcssreactjs

Tips for accessing values from a bs4 result set in Beautiful Soup?

Is there a way to extract all the title values from this bs4 result set? [<span class="zaman" title="16.3.2022 15:22:44">1 hf.</span>, <span class="hide zaman pull-right ml-5 mt--1">( Message Deleted )</sp ...

pythonhtmlweb-scrapingbeautifulsoup

When trying to associate the foreign key with the User object, I am unable to access the relevant data

models.py class Order(models.Model): PAYMENT_OPTIONS = ( ('VISA','VISA'), ('Master','Master'), ('Octopus','Octopus'), ('Cash','Cash'), ) ...

pythonhtmldjango

`Unable to display webpage on Android APK`

I've been utilizing phonegap to create a web page that mimics an app, and while the page functions well in the native browser on Android and works fine in the emulator, it displays only a white blank page when accessed through the actual app (which ha ...

androidcsscordovamobile

How to set textboxes as read-only depending on the drop-down choice?

After developing some scripts to automatically populate the data-length and data-width in textboxes based on a dropdown selection, I now face the challenge of making the .width and .length textboxes readonly depending on the selected dropdown option. Is t ...

javascriptjqueryhtmlcss

Is it possible to display multiple slideshows in separate tabs on a single page simultaneously?

I am trying to create multiple slideshows, each in a different tab on the same page. Although I am not an expert, I am attempting to figure out how to have the slideshow repeat with buttons controlling each one separately. When adding the complete script ...

htmlcssslideshow

Enhance the impact of "dialogs" to the fullest extent or minimize it to achieve the

How can I position the minimized dialog on the bottom of the div when appending dialogs next to each other in a FB messaging system? To achieve a Facebook messaging effect, the titlebar must go down when minimizing/maximizing the dialog. Perform the follo ...

javascriptjquerycss

What is the method for inserting an image into a designated container in HTML?

I created a slideshow in the top row and have added two containers below it. However, every time I try to include an image instead of text in the container, the image ends up overflowing the container and takes over the entire page. How can I ensure that t ...

htmlcss

Incorporate pug and sass into your React project for a more

Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...

javascripthtmlcssreactjspug

"Utilizing the POST REDIRECT GET approach within a form that submits to itself helps prevent duplicate entries from

Struggling with grasping the fundamentals of the POST REDIRECT GET pattern in forms that submit to themselves has been one of the toughest challenges I've faced. The issue arises when a user goes back or refreshes the page, leading to duplicate entrie ...

phphtmlforms

Display various information with every "show details" button clicked on the Bootstrap Vue table row

My table has rows with multiple "More Details" buttons that, when clicked, reveal additional information specific to that row. The goal is to display information X when the first "More Details" button is clicked and information Y when the second "More Deta ...

javascripthtmlvue.jsvuejs2

Double tap problem with pseudo elements on iOS links

Trying to achieve a scrolling line effect beneath anchor links for a client project led me to attempt some CSS3 coding, only to find myself stuck with an elusive bug after spending hours on it. The issue arises on mobile devices (iOS and Android) where, up ...

htmlcss

Transfer data from HTML button to Javascript function

I'm having trouble passing a value from a button in my HTML document to a JavaScript function in another document. I've tried using getElementById(), but it's not working. What could be the issue? Any help would be greatly appreciated. Thank ...

javascripthtmld3.js

Reveal the table only once a search has been completed

Currently, I am in the process of developing a small project and my aim is to have the table with the results appear only upon clicking the button or initiating a search. If you are interested, you can view it at this link: . My objective is to keep the t ...

phpjavascriptjqueryhtml

"JQuery's selector is failing to locate elements once they have been loaded through an

I am facing an issue where jQuery selectors are not working on elements loaded from the server via Ajax requests, but they work fine in normal mode. $('#myid').change(function(){ alert('OK!'); }); <select id="myid"> <optio ...

javascriptjqueryhtmlajax

Remove the list by conducting a comparison analysis

<html> <head> <title> Manipulating List Items Using JavaScript </title> <script type="text/javascript"> function appendNewNode(){ if(!document.getElementById) return; var newlisttext = document.changeform.newlist.val ...

javascriptjqueryhtml

Efficiently running multiple PHP pages with just one simple click

Below is the code fragment that I currently have: <html> <script type="text/javascript"> function Run() {var a=["ONE" ,"TWO" ,"THREE", "FOUR", "FIVE"]; window.location.href = "index.php?w1=" +a;} </script> <body> <input type="b ...

javascriptphphtml

Why did the creators choose to integrate a dropdown menu into Twitter Bootstrap?

While exploring Twitter's Bootstrap framework, I couldn't help but be impressed. However, one feature that has left me a bit puzzled is the dropdown navigation menu. First of all, to view child links, you need to click on the parent. I understan ...

jqueryhtmltwitter-bootstrapsemantic-markup

Initiating the form with a query mark

Recently, I found myself in a disagreement with a colleague over the validity of a certain URL: <form action="?foo=bar" method="get"> According to him, using this URL can lead to troubles as the browser may struggle to correctly redirect to the int ...

htmlformsurl