gpt4 book ai didi

javascript - 加载和显示 svg

转载 作者:太空狗 更新时间:2023-10-29 14:47:34 29 4
gpt4 key购买 nike

如何将 .svg 加载到 fabricjs.html 页面中?

我的 Fabric fiddle尝试加载 http .svg 文件,但我当然尝试过本地版本。我使用了从 adobe illustrator 和 fabric 本身生成的 .svg 文件。

fabric.loadSVGFromURL( gvs_svgSrc, 
function ( argo )
{ //alert( "load handler : " + argo ) ;
// ... returns: #<fabric.Rect>
lvo_SVG = argo.set({ left: 250, top: 200, angle: 0 });
lvo_SVG = argo.scale(0.25);
gvo_canvas.add( lvo_SVG );
gvo_canvas.renderAll();
});

最佳答案

这是从外部 .svg 加载 SVG 的方法

这是代码(确保链接到您自己的 fabricJS .js):

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fabric.min.js"></script>

<style>
body{ background-color: ivory; }
canvas{border: 1px solid red; }
</style>

<script>
$(function(){

var canvas = new fabric.Canvas('canvas');
var group = [];

fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg",function(objects,options) {

var loadedObjects = new fabric.Group(group);

loadedObjects.set({
left: 100,
top: 100,
width:175,
height:175
});

canvas.add(loadedObjects);
canvas.renderAll();

},function(item, object) {
object.set('id',item.getAttribute('id'));
group.push(object);
});


}); // end $(function(){});
</script>

</head>

<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

关于javascript - 加载和显示 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15303989/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com