Safari embeded SVG doctype

后端未结

关注

 3  560

I have created a page that draws various SVG elements using the raphaeljs library, but I\'m having some issues in Safari.

I am drawing images and using a clipping p

相关标签:

3条回答

天涯浪人

2020-12-20 04:18

You say that you want Safari to embed SVG properly. If by that you mean inline SVG, then know that Safari (as of v 5.0.5) can't do it. This, for example, is not supported:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
            <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
        </svg>
    </body>
</html>

But if you mean embed SVG using an HTML element, then Safari can do this. Take the SVG code, put it in a file called "circle.svg" and then embed it using any of these three elements:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <embed src="circle.svg" type="image/svg+xml"></embed>
        <object data="circle.svg" type="image/svg+xml"></object>
        <iframe src="circle.svg"></iframe>
    </body>
</html>

0 讨论(0)

無奈伤痛

2020-12-20 04:20

The following works for me in Safari 5.0.5, MacOSX 10.5 and mobile Safari on iPad. I'm using JQuery to parse the SVG XML out of a string and raphaelJS to do the heavy lifting on the SVG side of things. Clicks can be handled with the click() function from jQuery, or the mouse event handling in RaphaelJS.

// svg is a string that contains an SVG path for clipping
SVG_NS = "http://www.w3.org/2000/svg";
pth = $.parseXML(svg)           
doc = $(pth)
// Find the actual element, this may not be the most efficient method
pthelm = null;
doc.children().each(function() {pthelm = this;});
// Duplicate into the document's DOM for webkit
npth = document.createElementNS(SVG_NS, pthelm.nodeName)
for (a in pthelm.attributes) {
    attr = pthelm.attributes[a];
    npth.setAttribute(attr.nodeName, attr.nodeValue);
}
pthelm = npth;                      

cpe = document.createElementNS(SVG_NS, 'clipPath')      
cpe.setAttribute('id', 'svgclippath');
cpe.appendChild(pthelm);
paper.canvas.appendChild(cpe);
img = "http://example.org/path/to/your/image.jpg";
iw = 100; // Image Width
ih = 200; // Image Height
x = svgcanvas.image(img, 0, 0, iw, ih)
x.node.setAttribute('preserveAspectRatio', 'none')
x.node.setAttribute('clip-path', 'url(#svgclippath)')

0 讨论(0)

旧时难觅i

2020-12-20 04:32

In my case I was embeding the .svg into the HTML code. Putting the type="image/svg+xml" attribute into the <embed> tag was enough to see the image on safari (mobile). I didn't test on laptop.

0 讨论(0)
发布评论:

提交评论
- 加载中...