javascript 加载和显示 svg
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15303989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading and displaying svg
提问by dsdsdsdsd
how do you load a .svg into a fabricjs.html page?
你如何将 .svg 加载到 fabricjs.html 页面？
my fabric fiddleattempts to load a http .svg file, but I have, of course, tried local versions. I have used .svg files generated from adobe illustrator and fabric itself.
我的结构小提琴尝试加载 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();
});
回答by markE
Here's how you load SVG from an external .svg
以下是从外部 .svg 加载 SVG 的方法
Here's code (be sure you link to your own fabricJS .js):
这是代码（确保您链接到您自己的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>
回答by Milan Krushna
fabric.loadSVGFromURL('http://example.com/_bg.svg',function(objects, options){
var svgData = fabric.util.groupSVGElements(objects, options);
svgData.top = 30;
svgData.left = 50;
canvas.add(svgData);
});
- Load .svg file in canvas from a valid .svg URL using fabric
- Load svg file in canvas trough fabric
- 使用结构从有效的 .svg URL 在画布中加载 .svg 文件
- 在画布槽织物中加载 svg 文件
