如何解决如何将SVG对象addTo添加到多个现有的html元素？
我对js（和stackoverflow）很陌生。我正在尝试使用svg.js生成一些svg形状，以用作博客供稿上的文章的特色图片。 Pico cms生成博客，处于未完成状态的here。
我设法编写的脚本已在此处运行。当前，它在通过SVG.addTo（“ selector”）找到的第一个元素上生成一（1）个svg。我要完成的工作是选择所有适当的html元素（即SVG.addTo（“。class”）。
谢谢：）
const width = 200
const height = 1.5 * width
const res = 100
let canvas = SVG()
// .size('50%','50%')
.viewBox("0 0 " + width + " " + height)
// let canvas = SVG.find(".featured-svg")
const xStep = width / res
const yStep = height / res
// Math.seedrandom('test')
function landScape() {
const polygon = [
[0,Math.round(Math.random() * res) * yStep]
]
let y = polygon[0][1]
for (x = 0; x < width;) {
x += xStep
polygon.push([x,y])
y += [yStep,-yStep][Math.round(2 * Math.random())]
polygon.push([x,y])
}
polygon.push([width,height],[0,height])
canvas.polygon(polygon)
.attr({
class: "fill halfOpacity"
})
}
function randomPixel() {
let x,y,polygon;
x = Math.floor(Math.random() * res) * xStep;
y = Math.floor(Math.random() * res) * yStep;
polygon = [
[x,y]
];
polygon.push(
[x,y + yStep],[x + xStep,y],);
return polygon;
}
function artefact() {
let polygon;
polygon = randomPixel()
for (x = 0; x < 100; x++) {
let chosenIndex,x1,y1,x2,y2,chosenIndexPointDiff;
chosenIndex = Math.floor(Math.random() * (polygon.length - 1));
x1 = polygon[chosenIndex][0];
y1 = polygon[chosenIndex][1];
x2 = polygon[chosenIndex + 1][0];
y2 = polygon[chosenIndex + 1][1];
chosenIndexPointDiff = [x1 - x2,y1 - y2];
switch (true) {
case chosenIndexPointDiff.includes(xStep):
polygon.splice(
chosenIndex + 1,[x1,y1 + yStep],[x2,y2 + yStep]
);
break;
case chosenIndexPointDiff.includes(- xStep):
polygon.splice(
chosenIndex + 1,y1 - yStep],y2 - yStep]
);
break;
case chosenIndexPointDiff.includes(yStep):
polygon.splice(
chosenIndex + 1,[x1 - xStep,y1],[x2 - xStep,y2]
);
break;
case chosenIndexPointDiff.includes(- yStep):
polygon.splice(
chosenIndex + 1,[x1 + xStep,[x2 + xStep,y2]
);
break;
default:
console.log("Neznam Switch!");
break;
}
}
canvas.polygon(polygon)
.attr({
class: "fill halfOpacity"
})
}
landScape()
landScape()
landScape()
artefact()
artefact()
artefact()
canvas.addTo("article")<!DOCTYPE html>
<html lang="sl">
<head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Index | prolerue</title>
<Meta name="robots" content="noindex,nofollow" />
<link rel="canonical" href="http://prolerue.si/" />
<!-- stylesheets -->
<link rel="stylesheet" href="http://prolerue.si/themes/prolerue_theme/css/style.css" type="text/css" />
<link rel="stylesheet" href="http://prolerue.si/themes/prolerue_theme/css/svg.css" type="text/css" />
<link rel="stylesheet" href="http://prolerue.si/themes/prolerue_theme/css/jqmath-0.4.3.css" type="text/css" />
<!-- scripts -->
<script src="http://prolerue.si/themes/prolerue_theme/js/jquery-1.4.3.min.js"></script><!-- mathscribe -->
<script src="http://prolerue.si/themes/prolerue_theme/js/jqmath-etc-0.4.6.min.js" charset="utf-8"></script><!-- mathscribe -->
<script src="http://prolerue.si/themes/prolerue_theme/js/svg-inject.min.js"></script><!-- svg-inject -->
<script src="http://prolerue.si/themes/prolerue_theme/js/svg.min.js"></script><!-- svg -->
</head>
<body>
<!-- HEADER -->
<header role="banner">
<h1>
<a href="http://prolerue.si/">
prolerue
</a>
</h1>
</header>
<!-- NAV -->
<nav role="navigation" tabindex="-1">
<a
href="http://prolerue.si/?blog"
class="nav-item
"
>blog</a>
<a
href="http://prolerue.si/?zapiski"
class="nav-item
"
>zapiski</a>
<a
href="http://prolerue.si/?museum"
class="nav-item
"
>svg muzej</a>
<a
href="http://prolerue.si/?js-sandBox"
class="nav-item
"
>js sandBox</a>
<a
href="http://prolerue.si/?search"
class="nav-item
"
>išči</a>
</nav>
<!-- CONTENT -->
<main role="main">
<a href="http://prolerue.si/?zapiski%2Fnegarestani2018-intelligence_spirit">
<article class="fsvg">
<h1>
Intelligence and Spirit
</h1>
<address>
</address>
<time datetime="2020-09-06">
2020-09-06
</time>
<blockquote>
mind *is* only what it *does*,what it does is first and foremost realized (pogojeno) by the *sociality* of agents,which itself is primarily (and ontologically) constituted by the semantic space of a public *language*
</blockquote>
</article>
</a>
<a href="http://prolerue.si/?zapiski%2Ftafurian_line">
<article class="fsvg">
<h1>
Upholding the Tafurian Line When the General Situation Is Historically Unfavourable
</h1>
<address>
</address>
<time datetime="2020-08-31">
2020-08-31
</time>
<blockquote>
</blockquote>
</article>
</a>
<a href="http://prolerue.si/?zapiski%2Fgradbena_mehanika">
<article class="fsvg">
<h1>
Gradbena mehanika
</h1>
<address>
</address>
<time datetime="2020-08-23">
2020-08-23
</time>
<blockquote>
</blockquote>
</article>
</a>
<a href="http://prolerue.si/?blog%2Fkriza_prenova_stvarnost">
<article class="fsvg">
<h1>
Kriza,prenova,nova stvarnost
</h1>
<address>
Uroš Mikanovič
</address>
<time datetime="2020-08-11">
2020-08-11
</time>
<blockquote>
Arhitektura je Tradicionalno zamišljena kot stabilna struktura,ki v svojih izdelkih formalizira trajne vrednote in konsolidira sicer slučajne vzorce in oblike urbanega. A arhitekt -- kot kdorkoli drug oziroma katerikoli drug profesionalec -- začenja iz domene,ki je že urejena skladno s shemami,ki se zdijo objektivnejše tem bolj kot pri njih pasivno vztrajamo.
</blockquote>
</article>
</a>
<a href="http://prolerue.si/?zapiski%2Fprojekt_utopija">
<article class="fsvg">
<h1>
Projekt in utopija
</h1>
<address>
</address>
<time datetime="2020-03-23">
2020-03-23
</time>
<blockquote>
</blockquote>
</article>
</a>
</main>
<!-- FOOTER -->
<footer>
</footer>
<!-- scripts -->
<script src="http://prolerue.si/themes/prolerue_theme/js/featured-svg.js"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
