Svg above a image and scale

Question

I have a page that haves a image of a bag, and above the bag image i putted a svg overlay, the problem is that the svg is not overllaping on the image and also is not being responsive.

Working example: https://jsbin.com/lilaxizizo/1/edit

code:

<!DOCTYPE html>
<html>
<head>
    <title>SVG </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
<div class="container">
<div id="wrapper">
<img  class="img-responsive" src="duffell_bag.jpg"  alt="Planets" usemap="#bag">


<svg style="position:absolute;z-index:10" height="300" width="500">
  <polygon points="103,79,119,74,136,68,173,67,202,70,262,78,316,89,380,97,393,121,402,157,407,184,418,216,424,249,419,261,404,274,359,288,332,294,271,284,195,266,142,255,83,238,59,223,64,177" style="fill-opacity:0.1;fill:lime;stroke:purple;stroke-width:1" />
  Sorry, your browser does not support inline SVG.
</svg>

</div>
</div>


</body>

</html>

score 2 · Answer 1 · edited May 23 '17 at 11:46

First, if you want the SVG to be responsive, you need to give it a viewBox. See this question for more details.

How can I make an svg scale with its parent container?

Next, if you want the SVG to sit on top of the image, surround them both with a <div> with postion: relative. That way, if you absolutle position the SVG, it will be relative to the div and not the whole page.

div {
  position: relative;
}

img, svg {
  width: 500px;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
}

<div>
  
  <img  class="img-responsive" src="http://i.imgur.com/icQzdFl.jpg">

  <svg height="300" width="500">
    <polygon points="103,79,119,74,136,68,173,67,202,70,262,78,316,89,380,97,393,121,402,157,407,184,418,216,424,249,419,261,404,274,359,288,332,294,271,284,195,266,142,255,83,238,59,223,64,177" style="fill-opacity:0.1;fill:lime;stroke:purple;stroke-width:1" />
   </svg>

</div>

This is fixed size; not responsive. – frezq Dec 27 '16 at 16:16 — frezq, Dec 27 '16 at 16:16

score -1 · Answer 2 · answered Oct 04 '16 at 18:24

-1

Add 'margin-top' to the svg element. I've tested it and a value of '-305px' seems to do the trick.

<svg style="margin-top:-305px;position:absolute;z-index:10" height="300" width="500">

answered Oct 04 '16 at 18:24

Cayman Roe

125
10

is not responsive, try to resize it, and the solution you give is very buggy, if you keep resizing the window, is not stable – Pedro Oct 04 '16 at 18:30
I did a google search simply on 'scaling an SVG', and there was countless resources (mostly already on stackoverflow) all mentioning viewBox. Stackoverflow is place to provide assistance when you are truly stuck. Please research in future. – Cayman Roe Oct 04 '16 at 22:37

Svg above a image and scale

2 Answers2