83399

How to make an svg masked image compatible with Internet Explorer

Question:

Lately i have created an svg masked image that works perfectly in Chrome but done not work in My version of Internet explorer. Here is the End result expected from my svg

<a href="https://i.stack.imgur.com/xQpjH.png" rel="nofollow"><img alt="End Result Expected" class="b-lazy" data-src="https://i.stack.imgur.com/xQpjH.png" data-original="https://i.stack.imgur.com/xQpjH.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

This is my svg code

<svg width="0" height="0" viewBox="0 0 160 160"> <defs> <clipPath id="shape"> <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" /> </clipPath> </defs> </svg> <img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' /> <img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />

And this is my css

* { padding: 0; margin: 0; } .photo_rectangle_inverse { height: 160px; width: 170px; -webkit-clip-path: url(#shape); clip-path: url(#shape); position: relative; -webkit-transform: translateZ(1px) }

Since the svg was not working in Internet Explorer (IE 11), after reading <a href="http://caniuse.com/#feat=svg" rel="nofollow">this article</a> that talks about compatibility issue with Browsers, I added

<meta http-equiv="X-UA-Compatible" content="IE=edge">

To the top of my page because IE Edge based on the article seems to be the most compatible with Svg.

But still the svg shape is not displaying.

Here is a <a href="http://jsfiddle.net/manofgod/omat2km1/" rel="nofollow">Jsfiddle</a> . Note Jsfiddle does not allow meta tag

<strong>How to make an svg masked image compatible with Internet Explorer ?</strong>

Tks

Answer1:

IE won't apply an SVG clip to a html element, so you need an SVG <image> element rather than an <html> img element e.g.

<pre class="snippet-code-css lang-css prettyprint-override">* { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } .photo_rectangle_inverse { -webkit-clip-path: url(#shape); clip-path: url(#shape); position: relative; -webkit-transform: translateZ(1px) } <pre class="snippet-code-html lang-html prettyprint-override"> <svg height="100%" width="100%" > <defs> <clipPath id="shape"> <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" /> </clipPath> </defs> <image height="160px" width="170px" xlink:href='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse'/> <image transform="translate(170,0)" height="160px" width="170px" xlink:href='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' /> </svg>'

<a href="https://i.stack.imgur.com/v6JCy.png" rel="nofollow"><img alt="IE 11 screenshot" class="b-lazy" data-src="https://i.stack.imgur.com/v6JCy.png" data-original="https://i.stack.imgur.com/v6JCy.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Recommend

  • Expressing setup time with cumulatives
  • How to convert an NFA to the corresponding Regular Expression?
  • Raphaeljs: accessing the relative postion of a click on a closed path
  • Powershell: Copy-Item not working when in ForEach loop
  • Retrieve the name of the value a Scala macro invocation will be assigned to
  • R DataTable Join and constrain rows
  • Cythonized function unexpectedly slow
  • How to reshape a 3D numpy array?
  • What does Main.1 output file do in XCode?
  • d3.js: why is d3.geo.path() giving NaN?
  • How to set current CultureUI via XAML binding
  • Hiding Directories Programatically in C#
  • File not found error python
  • How to change placeholder text in an autocomplete activity of android google place?
  • Why are “sc.addFile” and “spark-submit --files” not distributing a local file to all workers?
  • My first C# WPF ValidationRule is not firing
  • Raphael.js function getBBox give back NAN/NAN/NAN in IE8
  • node.js POST request fails
  • XMLBeans Duplicate Class and Class Not Found Errors
  • How to rotate the dial in a gauge chart? Using python plotly
  • How to draw a line dynamically in android [duplicate]
  • New Firebase failed: First argument must be a valid firebase URL and the path can't contain “.”
  • php script is parsing content from RTE (tt_news) but internal links are not appearing as speaking ur
  • Jquery popup on mouse over of calendar control
  • WPF Visiblity Binding to Boolean Expression with multiple Variables
  • how to upload multiple files in c# windows application
  • MS Access - How to change the linked table path by amend the table
  • JBoss External Properties Files in Classpath
  • Connect .sks to skscene.h
  • Why does access(2) check for real and not effective UID?
  • Checking free space on FTP server
  • How to convert from System.Drawing.Color to Excel.ColorFormat in C#? Change comment color
  • script to move all files from one location to another location
  • ILMerge & Keep Assembly Name
  • Symfony2: How to get request parameter
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to stop GridView from loading again when I press back button?