Question

INDEX.HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  width: 960px;
  padding-top: 40px;
  margin: auto;
  position: relative;
}
svg {
    width: 100%;
    max-height: 400px;
}
</style>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type='text/javascript'>

window.addEventListener('load', function () {
    d3.xml('iPhone.svg', 'image/svg+xml', function (error, data) {
        d3.select('body').node().appendChild(data.documentElement);
        var svg = d3.select('svg');
        var appScreen = svg.select('#ScreenBackground');
        var screenWidth = +appScreen.attr('width'),
            screenHeight = +appScreen.attr('height');
        var appButton = svg.select('#AppButton')
            .on('mouseenter', function () {
                appButton.style('fill', '#AB69C6');
            })
            .on('mouseleave', function () {
                appButton.style('fill', '#9B59B6')
            })
            .on('click', function () {
                var x = Math.random() * screenWidth;
                var y = Math.random() * screenHeight;
                appButton
                    .transition()
                    .duration(1000)
                    .ease('bounce')
                    .attr('cx', x)
                    .attr('cy', y);
            });
    });
});

</script>

iPhone.svg

<?xml version='1.0' encoding='utf-8'?>
<svg width='400px' height='800px' viewBox='0 0 400 800'
     version='1.1' xmlns='http://www.w3.org/2000/svg'>
     <title> SafeSignal </title>
    <description>Created with Sketch (http:/ / www.bohemiancoding.com / sketch) </description>
    <defs>
        <!-- Define a clipping path the size of the screen -->
    </defs>
    <!-- iPhone frame -->
    <rect id='iPhone' fill='#000000'
          x='0' y='0' width='400' height='800' rx='50' ry='50'></rect>
    <!-- iPhone home button -->
    <circle id='HomeButton' fill='#202020'
            cx='200' cy='730' r='40'></circle>
    <!-- Apply the clipping path to the screen group -->
    <g id='ScreenGroup' transform='translate(20, 80)'
       clip-path='url(#ScreenMask)'>
        <!-- Screen background -->
        <rect id = "ScreenBackground" x ="214" y ="0" width ="102" height ="568" style = "pointer-events: all;" ></rect>
        <!-- An interactive button in the app -->
        <circle id='AppButton' fill='#9B59B6' cx='180' cy='290' r='50' style='cursor:pointer;'></circle>
    </g>

</svg>

从谷歌的帮助，我已经制作了这个SVG。现在我试图让背景作为图像，但我已经尝试了所有的方法，但每次我做这个你添加任何图像我得到这个错误未捕获的TypeError：无法读取属性'documentElement'的null 我不知道我哪里出错了，因为我是这个svg的新手

Answer 1

<object type="image/svg+xml" 
    width="100" height="100" style="float:right" 
    data="http://blog.codedread.com/clipart/apple.svgz">
  <span/></object>

Answer 2

<object id="E" type="image/svg+xml" data="http://srufaculty.sru.edu/david.dailey/svg/ovals.svg" width="320" height="240">
alt : Your browser has no SVG support. Please install <a
href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>
plugin (for Internet Explorer) or use <a
href="http://www.getfirefox.com/">Firefox</a>, <a
href="http://www.opera.com/">Opera</a> or <a
href="http://www.apple.com/safari/download/">Safari</a> instead.
</object>

Answer 3

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <h1>HTML5 SVG Demo (embed with iframe)</h1>

<p> A nice green circle that was embeded using the HTML "iframe" tag:
<iframe src="green-circle.svg" 
    width="64" height="64" style="border:1;"></iframe>
</p>
<p>
Tips:
<iframe src="green-circle.svg" style="float:left;margin-right:1cm;" 
    width="64" height="40" style="border:1;"></iframe>
</p>
</body>
</html>

在svg中添加图像

3 个答案: