首页 文章

使用jquery进行svg缩放

提问于
浏览
1

我正在开发一个网站,但我不是那么擅长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 回答

  • 0

    您应该使用带有 style="width:1024;height:768" 的img标签以正确的尺寸显示svg . 您正在将svg权限附加到正文上,而不使用img标记 . 据我所知,你的new.svg属于同一个来源 . 所以不需要用jQuery加载它 .

相关问题