`
sungang_1120
  • 浏览: 323569 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类

SVG 形状学习之——SVG 线<line>

阅读更多

 

<line> 标签用来创建线条。

 

 

<line> 标签

<line> 标签用来创建线条。

请把下面的代码拷贝到记事本,然后把文件保存为 "line1.svg"。把此文件放入您的 web 目录:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

 

 

代码解释:

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

 

 

  • 大小: 11.1 KB
分享到:
评论

相关推荐

    SVG矢量图语言学习资料(pdf)

    1. **形状元素**:如`&lt;rect&gt;`(矩形)、`&lt;circle&gt;`(圆形)、`&lt;ellipse&gt;`(椭圆)、`&lt;line&gt;`(线)、`&lt;polyline&gt;`(多边形)和`&lt;polygon&gt;`(多边形)等,用于创建基本图形。 2. **路径元素**:`&lt;path&gt;`元素是SVG中最...

    HTML5 SVG可爱的笑脸动画特效

    1. **SVG元素**:SVG由一系列基本形状元素组成,如`&lt;rect&gt;`(矩形)、`&lt;circle&gt;`(圆形)、`&lt;ellipse&gt;`(椭圆)、`&lt;line&gt;`(线条)、`&lt;polygon&gt;`(多边形)和`&lt;path&gt;`(路径)。这些元素可以组合起来构建复杂的图形...

    SVG参考文档 可伸缩向量图形

    1. **基本形状**:包括矩形`&lt;rect&gt;`、圆形`&lt;circle&gt;`、椭圆`&lt;ellipse&gt;`、线`&lt;line&gt;`、折线`&lt;polyline&gt;`和多边形`&lt;polygon&gt;`。 2. **路径`&lt;path&gt;`**:可以创建更复杂的形状,通过M(移动到)、L(直线到)、C(三次...

    css3使用svg实现天气预报图标动画特效源码.zip

    1. **SVG图形的创建**:SVG使用路径(`&lt;path&gt;`)、圆形(`&lt;circle&gt;`)、矩形(`&lt;rect&gt;`)、椭圆(`&lt;ellipse&gt;`)、线(`&lt;line&gt;`)、多边形(`&lt;polygon&gt;`)等元素来构建复杂的图形。这些元素通过属性如`d`(定义路径...

    WorkFlow SVG 入门与提高

    - **PGML** 和 **VML** 都是使用CSS的XML向量语言,但由于它们相互竞争,W3C决定结合两者的优点开发新的语言——SVG。 - **2000年8月2日**:W3C发布了SVG标准草案。 - **2001年9月4日**:SVG正式成为W3C的标准(第一...

    HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码.zip

    开发者可能通过定义`&lt;svg&gt;`元素,使用`&lt;circle&gt;`、`&lt;path&gt;`等标签来构建静态的水泡形状,然后通过CSS或JavaScript来操纵这些元素,实现分裂和动画效果。 结合Canvas和SVG,开发者可以充分利用两者的优势:Canvas...

    VML极道教程 vml学习

    除了矩形,`&lt;v:line&gt;`可用于绘制线条,`&lt;v:polyline&gt;`和`&lt;v:path&gt;`则提供了更复杂的线条和路径绘制功能。这些元素的属性类似,都是通过XML属性来控制图形的不同视觉效果。 ### 三、VML与SVG的对比 SVG是另一种用于...

    网页动态背景代码(4种)

    本文将深入探讨四种不同的网页动态背景特效,包括Canvas特效、SVG特效,并结合压缩包内的四个示例——“魔幻方块”、“鼠标流星”、“雷电”和“canvas线条”,来解析这些特效的实现原理和技术要点。 首先,Canvas...

    js图形处理框架

    【标题】:JS图形处理框架——以Highcharts为例 在当今数据可视化日益重要的时代,JavaScript图形处理框架成为了前端开发人员的必备工具。"js图形处理框架"是指利用JavaScript语言实现的,用于创建交互式图表、图形...

    前端项目-d3-annotation.zip

    开发者可以根据需要创建新的注释类型,通过组合基本的SVG形状,实现更多复杂的注释样式和功能。 **使用D3-Annotation** 在D3-V4项目中使用D3-Annotation,首先需要引入库文件。通常,这可以通过npm或直接在HTML中...

    三角形的按钮,没见过吧,看看作者是怎么样实现的

    实现三角形按钮的关键在于图形绘制技术,可能是利用GDI(Graphics Device Interface)或GDI+,或者是更现代的Direct2D或SVG渲染。开发者可能自定义了控件类,覆盖了OnPaint方法,用以在窗口画布上绘制三角形形状。...

    WPF做的一些不规则图形

    下面将详细介绍如何利用WPF来实现不规则图形的创建,并结合给定的文件名“WpfCloudCtrl”探讨一个可能的用户控件——云形控件。 1. **WPF图形绘制基础**: WPF中的图形绘制主要基于`System.Windows.Shapes`命名...

    jfreechart.zip

    在Java开发中,JFreeChart通常与另一个库——JCommon一起使用,JCommon提供了许多基础的图形和数据处理功能,为JFreeChart的图表绘制提供支持。 一、JFreeChart核心概念与特性 1. 图表类型:JFreeChart支持多种...

    javascript经典特效---签名提示程序.rar

    Canvas提供了一组绘图方法,如`beginPath()`, `moveTo()`, `lineTo()`, `stroke()`等,用于在画布上绘制线条、曲线和其他形状,模拟用户签名的过程。 4. **数据存储与回放**:为了让用户能够查看或确认他们的签名,...

    jfreechart jar包

    1. **多样的图表类型**:JFreeChart支持多种图表类型,包括折线图(Line Chart)、柱状图(Bar Chart)、饼图(Pie Chart)、散点图(Scatter Plot)、面积图(Area Chart)以及组合图(Composite Chart)等,满足...

    radialGraph:使用拉斐尔的径向图

    在本案例中,我们讨论的是利用JavaScript库——拉斐尔(Raphaël)来创建径向图。拉斐尔是一个著名的JavaScript库,它允许开发人员在网页上进行矢量图形的绘制。 拉斐尔库是基于SVG(Scalable Vector Graphics)和...

    DrawingApp:带有jQuery和Canvas的简单绘图应用程序

    Canvas提供了一系列API,包括绘制线条、形状、图像等,是构建富媒体网页的关键技术之一。 二、DrawingApp的架构 DrawingApp的核心在于使用jQuery来操控Canvas元素,实现用户的绘图操作。项目结构通常包括以下几个...

    logomaker:HTML 5 Canvas 中的在线徽标编辑器

    - Canvas 是一个HTML标签,它的`&lt;canvas&gt;`元素提供了一个2D渲染上下文,可以在其中进行像素级别的图形操作。 - `canvas`元素本身不显示任何内容,需要通过JavaScript来绘制图形。这通常涉及到两个主要对象:`...

    1900+_线性的图标合集_AI素材下载.zip

    描述中的“1900+ 线性的图标合集.AI素材下载 AI、AI图标icon、图标集”进一步强调了这个资源包包含的数量——超过1900个图标,并且这些图标都是AI格式,这意味着它们是使用Adobe Illustrator(AI)这种专业矢量图形...

Global site tag (gtag.js) - Google Analytics