zoukankan      html  css  js  c++  java
  • SVG

     第一部分 SVG的基本知识

    基本元素

    react 圆角矩形 / circle 圆 / line 折线 / ellipse 自动闭合折线

    http://www.w3.org/2000/svg

    基本API

    创建图形: document.createElementTagNameNS(ns, tagName)

    添加图形:element.appendChild(childElement)

    获取属性:element.getAttribute(name)

    设置属性:element.setAttribute(name, value) 

    第二部分 SVG坐标系统

    SVG视野、世界、可视区域

    世界:无限大,SVG代码定义,(只要里面有SVG代码则存在SVG世界)

    视野(viewbox):可视区域

    <svg>限制的是视窗

    <rect>标识可视区域

    preserveAspectRatio:控制视野与视窗的关系

    参数一:none/xMinYMin/xMinYMax 表示可视区域与视窗关于x轴y轴的对齐方式;

    参数二:meet包含/slice 和视窗大小一致遮罩住多余视野

    定义可视区域

    例子一:

    视图的区域为400 x 400,如果是实际的显示应该是蓝色边框,但根据preserveAspectRatio  xMidYMid居中对齐meet全部显示,图像缩小变成如图效果。

    例子二:

    如果更改preserveAspectRatio 第二个参数为slice 则显示实际效果,则有一部分被遮罩住了

    例子三:

    preserveAspectRatio 更改第一个参数为none 则默认将视窗与可视区域大小重叠,平铺显示

    例子四:

    preserveAspectRatio 第一个参数XmidYMin,X轴居中对齐,Y轴顶端对齐

    结论:

    preserveAspectRatio 第一个参数XmidYMin,表示可视区域与视窗关于——X轴居中对齐,Y轴顶端对齐

    preserveAspectRatio 第一个参数XmidYMid,表示可视区域与视窗关于——X轴居中对齐,Y轴居中对齐

    preserveAspectRatio 第一个参数XmidYMax,表示可视区域与视窗关于——X轴居中对齐,Y轴底端对齐

     同理可推

    XminYmin,XminYmid,XminYmax,

    XmaxYmin,XmaxYmid,XmaxYmax

    SVG 分组

     <g>设置分组

    属性继承

    transform坐标变化

    嵌套使用

    SVG坐标系统

    笛卡尔直角坐标系

    SVG四个坐标系

    用户坐标系 (User Coordinate) -不会更改的世界坐标系,

    自身坐标系 (Current Coordinate) - 每个图形元素或分组独立出来的

    前驱坐标系 (Previous Coordinate) - 父容器坐标系

    参考坐标系 (Reference Coordinate) - 依据其他坐标系生成

    定义坐标位置时:根据前驱坐标定义位置,各个坐标系

    学习来源:http://www.imooc.com/learn/143

  • 相关阅读:
    Bzoj 1878: [SDOI2009]HH的项链 莫队
    BZOJ 2140: 稳定婚姻 Tarjan Map
    Bzoj 2190 : [SDOI2008]仪仗队 数论 特判
    bzoj 16801740 : [Usaco2005 Mar]Yogurt factory 贪心 双倍经验
    BZOJ 5387: [Lydsy1806月赛]质数拆分
    BZOJ 1379: [Baltic2001]Postman 水题
    Bzoj : 1823: [JSOI2010]满汉全席
    4952: [Wf2017]Need for Speed 二分
    BZOJ 2301: [HAOI2011]Problem b 2045: 双亲数 同BZOJ 1101 Zap 莫比乌斯反演 3倍经验
    BZOJ 1030: [JSOI2007]文本生成器 AC自动机
  • 原文地址:https://www.cnblogs.com/dongcheck/p/4651389.html
Copyright © 2011-2022 走看看