Question

我正在开发一个网站，但我在UI部分并不擅长，无论如何我已经设法从插图画家获得一个SVG文件，然后使用jquery我正在操纵它，但它没有在浏览器上正确显示， SVG大于＆＃34;预览＆＃34;在adobe illustrator上，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因为我不知道，之前有人遇到过这样的问题吗？

Answer 1

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

使用jquery进行svg缩放

1 个答案: