Set svg path data with javascript [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 10 months ago.

Improve this 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
– Leonid Lazaryev, Commented Jan 11, 2017 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
– sanojLeOne, Commented Jan 11, 2017 at 21:51

imhotap · Accepted Answer · 2017-01-11 21:45:36Z

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, 2017 at 21:45

imhotap

2,5641 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sanojLeOne Over a year ago

Thx for correcting the typos (not my mother language) I recreated the error and checked if that was the error put unfortunately no.

Leonid Lazaryev · Accepted Answer · 2017-01-11 21:59:57Z

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, 2017 at 21:59

Leonid Lazaryev

3261 silver badge8 bronze badges

2 Comments

sanojLeOne Over a year ago

Thank You Sir !! But why is it bad though it works fine if I use it else where ?

Leonid Lazaryev Over a year ago

@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'

Collectives™ on Stack Overflow

Set svg path data with javascript [closed]

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related