我正在开发一个网站,但我不是那么擅长UI部分,无论如何我设法从插图画家获得一个SVG文件然后使用jquery我操纵它,但它没有在浏览器上正确显示,SVG比adobe illustrator上的"preview",adobe上的预览使用了 <object>
但是在JQUERY我正在直接加载svg文件
这是我的svg文件的头
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 768"
style="width:1024;height:768;">
这是我的代码的开始
<!doctype html>
<html>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-
1.0.1.min.js"></script>
<script>
$.get('new.svg', function(data) {
$(document.body).append(data.documentElement);
$('#TESTGROUPCIRCLE').on('click touchstart', function () {
$('#tooltip').hide();
$('#TESTTEXT').fadeIn();
$('#MAIN').fadeOut();
});
我不确定为什么svg显示更大,当我直接得到它而不使用 <object>
,它显示在1333 * 999由于一个我不知道的原因,有没有人遇到过这样的问题?
1 回答
您应该使用带有
style="width:1024;height:768"
的img标签以正确的尺寸显示svg . 您正在将svg权限附加到正文上,而不使用img标记 . 据我所知,你的new.svg属于同一个来源 . 所以不需要用jQuery加载它 .