zoukankan      html  css  js  c++  java
  • SVG进阶练习

    请通过SVG实现以下的效果

     参考答案:

    <html>
    <head>
      
    </head>
    <body>
      <svg>
      <defs>
      <marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"
              orient="auto">
          <rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>
      </marker>
    
      <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7"
              orient="auto">
          <path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" />
      </marker>
    </defs>
    
    <path d="M100,20 l50,0 l0,50 l50,0"
          style="stroke: #0000cc; stroke- 1px; fill: none;
                       marker-start: url(#markerSquare);
                       marker-mid: url(#markerSquare);
                       marker-end: url(#markerArrow);
    
                     "
            />
      </svg>
    </body>
    </html>
    View Code

     请通过SVG实现以下效果

     

     参考答案:

    <html>
    <head>
      
    </head>
    <body>
      <svg>
        <text x="8" y="15" fill="black">(20,20)</text>
        <text x="50" y="80" fill="black">(50,50)</text>
        <text x="80" y="15" fill="black">(100,0)</text>
      
        <path d="M20 20 L50 50 A50 30,0 1 0 100 0" stroke="black" fill="none"/>
        <path d="M20 20 L50 50 A50 30,0 0 0 100 0" stroke="red" fill="none"/>
      </svg>
    </body>
    </html>
    View Code

     请将正方形向右平移80个像素:

    请将正方形以自身的中心为轴顺时针旋转45度:

  • 相关阅读:
    C#ActiveX控件开发学习
    SPFA最短路算法
    用宏实现C/C++从非零整数开始的数组
    mysql学习笔记
    python学习笔记(多进程并发)
    python学习笔记(socket模块)
    jQuery学习笔记
    python学习笔记(IO模型)
    Django学习笔记
    导入Excel时启动Excel.exe进程出错
  • 原文地址:https://www.cnblogs.com/gezhaoatdlnu/p/13735010.html
Copyright © 2011-2022 走看看