Question

我使用图片标记将SVG文件用作HTML5 svg 标记内的内容。

这适用于Chromium，但不适用于Firefox。

随着我添加了一些缩放功能，我意识到Chrome会将SVG图像转换为光栅图像。有没有办法改变图像标签或任何其他SVG元素的行为，我可以使用它来包含SVG文件而不触及其内部数据。

修改实际上我正在编写一个框架，用于在 svg 元素中执行交互式动画内容。为此，我可以通过使用标签访问加载的数据这里有一些源代码，所以你可以看到这是什么：

function createSVG( para ){
     if ( ! para["shape"] ) return undefined;
     var newElement = document.createElementNS("http://www.w3.org/2000/svg",para["shape"]);
      for ( var p in para ) {
                      if ( p == "xlink:href" ) newElement.setAttributeNS("http://www.w3.org/1999/xlink", p, para[p] );
                      else if ( p != "shape") newElement.setAttribute( p, para[p] );
      }
      return newElement
}

function defineSVG( para ){
     var data = createSVG( para );
     $(myDefs).append(data); // myDefs is the <defs> element used to store shapes etc.
}

function loadImageSVG( id, file, width, height ) { 
      defineSVG({ 
                "shape": "image", 
                "id" : id, 
                "xlink:href" : file, 
                "width" : width, 
                "height" : height, 
                "transform" : translate( - (width / 2), - (height / 2) ) // center image for later translation
       });     
}  
function useSVG( id, show ) {
                var data = createSVG({
                      "shape" : "use",
                        "id" : id,
                        "xlink:href": "#" + show,
                        "transform": ""
               })
              $(myContent).append( data ); // myContent is the <g> where i store <use> for all visible
              return data;
 }
 /* load SVG file smiley.svg and give id smile */
 loadImageSVG( "smile", "smiley.svg", 20, 20 ) 
 /* draw a 5 x 5 grid of smilies */ 
 for (var i = 0; i < 25; ++ i) {
        var turtle = useSVG( "turtle" + i, "smile" ); 
        turtle.setAttribute( "transform", "translate( " + (100 * (i / 5) ) + ", " + (100 * (i % 5  )  )  + " )" )                                  
   }

Answer 1

您可以考虑使用object代码：http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html#Web-Use-Object

另请注意there's a bug in WebKit with SVG scaling。

将SVG嵌入HTML5 SVG而不进行光栅化

1 个答案: