使用 javascript 设置 svg 路径数据

Question

我的问题是，当我想通过setAttribute("d","mySvgPathData"); 或.attr("d","mySvgPathData"); 设置路径元素的d(data) 属性时，..."d", 有一个意外的标记这里 @987654330 @。 所有这一切的目的是我想用 svg 图形勾勒出一个 div 的轮廓，并在两者之间留出一点空间。两者都具有圆形边缘，并且必须具有响应性。所以我想我会创建一个函数，通过在路径数据中包含一些变量来使路径适合视口。例如M _myVar,0 c20,0...，等等。

这是我计划的截图：

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

我重现了这种情况：

$(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>

---

我会在 this 帖子上发表评论，但我没有 50 个代表 :(

我已经在互联网上搜索了两天，但没有任何成功

Answer 1

你真的在使用setAttribute("d","mySvgPathData")吗？因为这会将字符串值 "mySvgPathData" 而不是mySvgPathData 变量的内容放入d。请改用setAttribute("d", mySvgPathData)。

顺便说一句。您的作品集文本中有拼写错误：“wast”->“vast”、“soft ware”->“software”。

Answer 2

你有错误的选择器，字符串被换行，这里是工作示例：

$(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>