svg

程序员文章站 2022-05-03 21:30:07

...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" 
preserveAspectRatio="none" onload="init()">
<script>

function init(){
        Root=document.documentElement
        Root.addEventListener("click", top.respond , false);
}

</script>
<rect x="0" y="0" width="100%" height="100%" fill="#ddd"/>
</svg>
l

<!DOCTYPE html>
<!-- saved from url=(0050)http://granite.sru.edu/~ddailey/svg/wordsput2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style> 
div.u{float:top;}
div.d{float:top;height:80%}
td{text-align:center;font-family:impact;width:15%;background:#eee}

</style>
<title>clicking words in HTML and putting them into SVG</title>
<script> 
function init(){
    var Ds=document.getElementsByTagName("td")
    for (i=0;i<Ds.length;i++) {
        Ds[i].onclick=function(){add(this)}
        Ds[i].id=Ds[i].firstChild.nodeValue

    }

    D=document.getElementById("E")
    SVGDoc=D.getSVGDocument()
    SVGRoot=SVGDoc.documentElement
    svgns="http://www.w3.org/2000/svg"

}

function add(o){

    var word=o.firstChild.nodeValue
    var T=SVGDoc.createElementNS(svgns,"text")
    var MsgNode=SVGDoc.createTextNode(word)
       var fontratio=0.05
        var adj=(1 - fontratio)
        x=Math.random()*.9 - 2*fontratio
        y=Math.random()*.5
        T.setAttribute("x",x)
        T.setAttribute("y",y)
    T.setAttribute("font-size",fontratio)
    T.setAttribute("font-family","serif")
    //alert(word)  //Safari 5 shows the alert but not what 
    //follows; Chrome doesn't get this far
    T.appendChild(MsgNode)
    SVGRoot.appendChild(T)

}

function respond(evt){
    var w=evt.target.firstChild.nodeValue
    document.getElementById(w).style.background="red"
}

</script>

<style id="ChromeStylist-pabfempgigicdjjlccdgnbmeggkbjdhd">body{background-color:#E0FFE7 !important;}</style><style>@media print {#ghostery-purple-box {display:none !important}}</style></head>
<body onload="init()">
<div align="center" class="u">
<table border="1">

    <tbody><tr><td id="artichoke">artichoke</td><td id="balustrade">balustrade</td>

        <td id="canteloupe">canteloupe</td><td id="dandelion">dandelion</td></tr>

    <tr><td id="elephant">elephant</td><td id="familiar">familiar</td>

        <td id="groundhog">groundhog</td><td id="Hydrophlorone">Hydrophlorone</td></tr>

</tbody></table>
Click on any word above or below
</div>
<hr>
<div class="d">
<embed name="E" id="E" src="./simplerectscript.svg" width="100%" height="100%">
</div>



</body></html>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<script><![CDATA[
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink" 

function Color(){
    var R=parseInt(Math.random()*255)
    var G=parseInt(Math.random()*255)
    var B=parseInt(Math.random()*255)
    return "rgb("+R+","+G+","+B+")"
}
Root=document.documentElement
var lastOne=Root
function add(evt){
    var G=document.getElementById("C")
    // 复制节点，包括其子节点
    var NG=G.cloneNode("true")

    var C=NG.firstChild
    C.setAttribute("cx", evt.clientX)
    C.setAttribute("cy", evt.clientY)
    C.setAttribute("fill", Color())
    Root.appendChild(NG)
    lastOne=C
}
function content(){
    if (lastOne.nodeName!="circle") return
    var x=lastOne.getAttribute("cx")
    var y=lastOne.getAttribute("cy")
    var T=document.createElementNS(xmlns,"text")
    //附加文字时，需要先创建一个textnode附加到text上， 然后将text节点附加到被附加的元素上
    Msg=document.createTextNode(Math.floor(Math.random()*10))
    T.appendChild(Msg)
    T.setAttribute("x", x-10)
    // 由于＋号有拼接字符串的功能，所以需要使用parseInt将其转化为数值
    T.setAttribute("y", parseInt(y)+50)
    T.setAttribute("font-size", 36)
    T.setAttribute("fill", "black")
    lastOne.parentNode.appendChild(T)
    lastOne=lastOne.parentNode.previousSibling.firstChild
}

function colorit(){
    if (lastOne.nodeName!="circle") return
    lastOne.setAttribute("fill",Color())
}
function remove(evt){
    lastOne=evt.currentTarget.previousSibling.firstChild
    Root.removeChild(evt.currentTarget)
}
]]></script>
<defs>

<g id="C" onclick="remove(evt)"><circle r="20" fill-opacity=".5" stroke="black" stroke-width="2" stroke-dasharray="8,4"/></g>
</defs>
<rect width="100%" height="100%" fill="white" onclick="add(evt)"/>

<rect x="15" y="20" height="50" width="235" stroke="#800" stroke-width="2" fill="grey" opacity=".65">
</rect>
<text x="27" y="40" font-size="12" font-family="arial" fill="#800">Click on blank space to add something</text>
<text x="49" y="60" font-size="12" font-family="arial" fill="#800">Click something to get rid of it</text>

<text x="40" y="100" font-size="12" font-family="arial" fill="black">Click here to add content to last</text>
<rect x="30" y="80" height="30" width="200" onclick="content()" stroke="black" stroke-width="2" fill="blue" opacity=".35" rx="10">
</rect>

<text x="40" y="140" font-size="12" font-family="arial" fill="black">Click here to change color of last</text>
<rect x="30" y="120" height="30" width="200" onclick="colorit()" stroke="blue" stroke-width="2" fill="red" opacity=".35" rx="10">
</rect>

</svg>

基本思想
求两个矩形是否相连或相交，两个矩形的最小外包矩形宽小于两个矩形宽的和，且两个矩形最小外包矩形的的高小于两个矩形高的和，则两个矩形相交。 
外包矩形的宽等于两个矩形的y轴最大值减去y轴的最小值。 
外包矩形的高等于两个矩形的x轴最大值减去x轴最小值。 
y轴最小值为两矩形左上角取小者，最大值为两矩形左上角加高取大值。 
x轴最小值为两矩形左上角取小者，x轴最大值为两矩形左上角加宽取大值。

var collide = function(rect1,rect2) {
        var maxX,maxY,minX,minY

        maxX = rect1.x+rect1.width >= rect2.x+rect2.width ? rect1.x+rect1.width : rect2.x+rect2.width
        maxY = rect1.y+rect1.height >= rect2.y+rect2.height ? rect1.y+rect1.height : rect2.y+rect2.height
        minX = rect1.x <= rect2.x ? rect1.x : rect2.x
        minY = rect1.y <= rect2.y ? rect1.y : rect2.y

        if(maxX - minX <= rect1.width+rect2.width && maxY - minY <= rect1.height+rect2.height){
          return true
        }else{
          return false
        }
      }

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #left,
            #right {
                float: left;
                height: 400px;
                width: 48%;
                border: 1px solid #CAD5EB;
                padding: 5px;
                margin-left: 10px;
            }
        </style>

        <script>
            window.onload = function() {
                var svg = document.getElementById("svg");
                // forEach 中可以传递回调函数，其中currentValue当前的对象，index和arr可选
                //语法：array.forEach(function(currentValue, index, arr), thisValue)
                //              function(currentValue, index, arr)
                //              svg && [].slice.call(document.querySelectorAll("input[type=radio]")).forEach(function(radio) {
                //如果直接使用Array.slice.call，会报Array没有slice这个方法，Array
                svg && Array.prototype.slice.call(document.querySelectorAll("input[type=radio]")).forEach(function(radio) {
                    // NodeList 在 chrome 中可以使用forEach遍历
                    //              console.log(document.querySelectorAll("input[type=radio]")); 是一个NodeList XML DOM对象
                    //              svg && document.querySelectorAll("input[type=radio]").forEach(function(radio) {

                    radio.addEventListener("click", function() {
                        var value = this.value;
                        if(value == "") {
                            svg.removeAttribute("preserveAspectRatio");
                            return;
                        }
                        if(value != "none") {
                            value = "xMinYMin " + value;
                        }
                        svg.setAttribute("preserveAspectRatio", value);
                    });
                });

                var svg2 = document.getElementById("svg2"),
                    select0 = document.getElementById("select0"),
                    select1 = document.getElementById("select1"),
                    select2 = document.getElementById("select2");

                if(svg2 && select0 && select1 && select2) {
                    [select0, select1, select2].forEach(function(select) {
                        select.onchange = function() {
                            svg2.setAttribute("preserveAspectRatio", select1.value + select2.value + " " + select0.value);
                        }
                    });
                }
            }
        </script>
    </head>

    <body>
        <div id="left">
            <!-- svg画布的三个概念  width="400" height="200" 为viewport，viewBox，  preserveAspectRatio -->
            <svg id="svg" width="400" height="200" viewBox="0 0 200 200" style="border:1px solid #cd0000;">
                <rect x="10" y="10" width="150" height="150" fill="#cd0000" />
            </svg>
            <p><input type="radio" id="radio0" name="ratio" value="" checked><label for="radio0">无preserveAspectRatio</label></p>
            <p><input type="radio" id="radio1" name="ratio" value="meet"><label for="radio1">meet</label></p>
            <p><input type="radio" id="radio2" name="ratio" value="slice"><label for="radio2">slice</label></p>
            <p><input type="radio" id="radio3" name="ratio" value="none"><label for="radio3">none</label></p>
        </div>
        <div id="right">
            <svg id="svg2" width="400" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
                <rect x="10" y="10" width="80" height="80" fill="#cd0000" />
            </svg>
            <p>meet/slice：
                <select id="select0">
                    <option value="meet" selected>meet</option>
                    <option value="slice">slice</option>
                </select>
            </p>
            <p>x方向：
                <select id="select1">
                    <option value="xMin" selected>xMin</option>
                    <option value="xMid">xMid</option>
                    <option value="xMax">xMax</option>
                </select>
            </p>
            <p>y方向：
                <select id="select2">
                    <option value="YMin" selected>YMin</option>
                    <option value="YMid">YMid</option>
                    <option value="YMax">YMax</option>
                </select>
            </p>
        </div>

    </body>

</html>

svg

SVG image xlink:href 设置失败_html/css_WEB-ITnose

在Webpack中如何加载SVG

vue-cli3+ 打包部署到服务器后，svg在iphone上无法正常显示 -- 工作笔记

SVG_38_path标签之字母Q_二次贝塞尔曲线

js+SVG实现动态时钟效果

SVG实现时钟效果

vue动态渲染svg、添加点击事件的实现

CSS3和SVG炫酷鼠标点击按钮效果_html/css_WEB-ITnose

svg 放大缩小后的比例

SVG绘图(二) -- 渲染满天星辰_html/css_WEB-ITnose