小编Jan*_*hta的帖子

如何使用Javascript将FontAwesome渲染为SVG图像？

我想渲染一个FontAwesome图标作为SVG动态地使用Javascript将其作为图像源提供.我希望我的输出是这样的

PS - 我会自己画圆圈.只需要一种渲染图标的方法.

到目前为止,我尝试过这种方法:

function addSVG() {

  var ele = document.getElementById("svg");

  var svg = `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
        <text x="4" y="15" style="font-family: FontAwesome" fill="red">&#xf007;</text>
    </svg>`

  var output = 'data:image/svg+xml;base64,' + btoa(svg)

  ele.src = output;
}
addSVG()

Run Code Online (Sandbox Code Playgroud)

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
What it should look like:
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <text x="4" y="15" style="font-family: FontAwesome" fill="red">&#xf007;</text>
  </svg>
What it looks like:
  <img id="svg">
</body>

Run Code Online (Sandbox Code Playgroud)

正如您所看到的,没有Javascript(只是在HTML中使用SVG),它可以正常工作.

html javascript svg font-awesome

Jan*_*hta

2018 07-06

6
推荐指数

1
解决办法

995
查看次数

使 cytoscape.js 动画连续播放

有什么办法可以让动画连续播放吗？

这是一个使用的演示ani.play()，但它只执行一次。不是连续的。

我想要一个“闪烁”节点。它的大小应该不断增大和缩小，直到用户说停止。

现在，我已经这样做了

var jAni = cy.$('#rose').animation({
  style: {
    'background-color': 'red',
    'width': 75
  },
  duration: 1000
});
jAni.play();

Run Code Online (Sandbox Code Playgroud)

正如文档中提到的ani.play()

cytoscape.js

Jan*_*hta

2018 06-14

5
推荐指数

1
解决办法

1181
查看次数

为什么 Cytoscape.js 会阻止跨源图像请求，而 d3.js 不会阻止？

尽管 Cytoscape.js 支持节点中的背景图像，但我无法显示没有 CORS（跨源资源共享）标头的图像。Chrome 抛出以下错误。

Access to image at 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
from origin 'https://null.jsbin.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Run Code Online (Sandbox Code Playgroud)

这是我试图访问的图像 -

但是，如果我尝试使用 d3.js 在节点中显示与背景相同的图像，则会显示该图像。

Cytoscape.js

Access to image at 'https://cdn2-www.dogtime.com/assets/uploads/gallery/goldendoodle-dog-breed-pictures/puppy-4_1.jpg'
from origin 'https://null.jsbin.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Run Code Online (Sandbox Code Playgroud)

var cy;
window.addEventListener('DOMContentLoaded', function() {

  cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
      .selector('node')
      .css({
        'height': 60,
        'width': 60,
        'background-fit': 'cover',
        'border-color': '#000',
        'border-width': …

Run Code Online (Sandbox Code Playgroud)

d3.js cytoscape.js

Jan*_*hta

2019 01-28

5
推荐指数

1
解决办法

1041
查看次数