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度:

  • 相关阅读:
    Python 第八章笔记
    B树和B+树的总结
    哈希表总结
    Redis基本数据结构总结之STRING和LIST
    红黑树之删除原理和实现
    红黑树之插入实现
    对排名前3000位博主进行数据分析
    o(n)线性排序算法
    排序算法总结
    贪心算法 题型总结
  • 原文地址:https://www.cnblogs.com/gezhaoatdlnu/p/13735010.html
Copyright © 2011-2022 走看看