命名空间与SVG样式控制
展示
img元素加载
object元素加载
embed元素加载
iframe元素加载
代码
-
HTML:
<h4>img元素加载</h4> <p> <img src="/assets/circle.svg" alt="有命名空间"> <img src="/assets/circle-no-xmlns.svg" alt="没有命名空间"> </p> <h4>object元素加载</h4> <p> <object data="/assets/circle.svg" type="image/svg+xml">有命名空间</object> <object data="/assets/circle-no-xmlns.svg" type="image/svg+xml">没有命名空间</object> </p> <h4>embed元素加载</h4> <p> <embed src="/assets/circle.svg" type="image/svg+xml" /> <embed src="/assets/circle-no-xmlns.svg" type="image/svg+xml" /> </p> <h4>iframe元素加载</h4> <div> <iframe src="/assets/circle.svg">有命名空间</iframe> <iframe src="/assets/circle-no-xmlns.svg">没有命名空间</iframe> </div>
-
circle.svg:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <circle cx="50" cy="50" r="40"></circle> </svg>