使用javascript

Question

我的问题是当我想通过d或setAttribute("d","mySvgPathData");设置路径元素的.attr("d","mySvgPathData");（数据）属性时..."d", 这里 "mySvgPathData"...。 所有这一切的目的是我想用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)。

顺便说一下。你的投资组合文本中有拼写错误：＆＃34; wast＆＃34; - ＆GT; ＆＃34;浩瀚＆＃34;，＆＃34;软件＆＃34; - ＆GT; ＆＃34;软件＆＃34;

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>