Set svg path data with javascript

Question

My problem is when I want to set the d(data) attribute of an path element via setAttribute("d","mySvgPathData"); or .attr("d","mySvgPathData"); there is an unexpected token by ..."d", here "mySvgPathData".... The purpose of all this is that i want to contour a div with an svg graphic and have a bit of space in between. Both with rounded edges and it has to be responsive. So I thought I'll just create a function that makes the path fit to the viewport by including some variables in the path data. e.g. M _myVar,0 c20,0..., and so on.

Here is a screenshot of what I am planning:

Here is the project I am working on (CodePen).

I recreated the situation:

$(document).ready(kontResize);

function kontResize() {
  $(".path").attr("d", "M1486,25c13.8,0,25,11.2,25,25v764c0,13.8-11.2,25-25,25H50c-13.8,0-25-11.2-25-25V50c0-13.8,11.2-25,25-25H1486 M1486,0H50C22.4,0,0,22.4,0,50v764c0,27.6,22.4,50,50,50h1436c27.6,0,50-22.4,50-50V50C1536,22.4,1513.6,0,1486,0L1486,0z
 ");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<svg viewbox="0 0 100 100">
  <path class="path" d="M 90,0 V90 H10 V10 H90 Z" />
</svg>

I would have commented on this post but I dont have 50 rep :(

I have searched the internet for two days now but with out any success

Seems like something wrong with your "mySvgPathData", Is this variable starts with M? I assume you have something like: var mySvgPathData = 'M'+_myVar+'0 c20,0...'. Am I right? — Leonid Lazaryev, Jan 11 '17 at 21:33
@Leonid Lazaryev I posted a code snippet with the actual data I used. Idk but is a compound path a problem because it works just fine if I put directly in to the html file? — sanojLeOne, Jan 11 '17 at 21:51

score 3 · Answer 1 · answered Jan 11 '17 at 21:45

3

Are you actually using setAttribute("d","mySvgPathData")? Because that puts the string value "mySvgPathData" rather than the content of the mySvgPathData variable into d. Try setAttribute("d", mySvgPathData) instead.

Btw. you're having typos in your portfolio text: "wast" -> "vast", "soft ware" -> "software".

answered Jan 11 '17 at 21:45

imhotap

2,275
1
8
16

Thx for correcting the typos (not my mother language) I recreated the error and checked if that was the error put unfortunately no. – sanojLeOne Jan 11 '17 at 21:53

score 1 · Accepted Answer · answered Jan 11 '17 at 21:59

1

You had bad selector there and string was braked with new line, here is working example:

$(document).ready(kontResize);

function kontResize() {
  $("path").attr("d", "M1486,25c13.8,0,25,11.2,25,25v764c0,13.8-11.2,25-25,25H50c-13.8,0-25-11.2-25-25V50c0-13.8,11.2-25,25-25H1486 M1486,0H50C22.4,0,0,22.4,0,50v764c0,27.6,22.4,50,50,50h1436c27.6,0,50 22.4,50-50V50C1536,22.4,1513.6,0,1486,0L1486,0z");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<svg viewbox="0 0 100 100">
  <path class="path" d="M 90,0 V90 H10 V10 H90 Z" />
</svg>

answered Jan 11 '17 at 21:59

Leonid Lazaryev

326
1
8

Thank You Sir !! But why is it bad though it works fine if I use it else where ? – sanojLeOne Jan 11 '17 at 22:02
1

@sanojLeOne it is how things done in javascript, you can not write string in 2 lines. If You do so, you have to use plus sign: var a = 'Hello'+ ' World' – Leonid Lazaryev Jan 11 '17 at 22:04

Set svg path data with javascript

2 Answers2