將SVG嵌入HTML5 SVG而無光柵化

我使用了圖片標籤，將SVG文件用作HTML5內容的標籤。將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 ) ) + ")")         
    }

來源

2012-06-28 MitSchoko

您可以使用' robertc

MitSchoko

爲什麼你需要指定一個外部資源？只需將SVG直接粘貼到DOM中即可。 – robertc

將SVG嵌入HTML5 SVG而無光柵化

回答

相關問題