当前位置: 首页 > 编程笔记 >

如何在HTML5 SVG中画一条线?

冯祺
2023-03-14
本文向大家介绍如何在HTML5 SVG中画一条线?,包括了如何在HTML5 SVG中画一条线?的使用技巧和注意事项,需要的朋友参考一下

SVG代表可伸缩矢量图形,是一种用于描述XML中的2D图形和图形应用程序的语言,然后由SVG查看器呈现XML。大多数网络浏览器可以显示SVG,就像显示PNG,GIF和JPG一样。

要在HTML SVG中绘制一条线,请使用SVG <line>元素。

示例

您可以尝试运行以下代码,以了解如何在HTML5 SVG中绘制线条。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Line</title>
   </head>
   <body>
      <h2>HTML5 SVG Line</h2>
      <svg id = "svgelem" width = "300" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "100" y2 = "100" style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>
 类似资料:
  • 问题内容: 我找不到用Python库画一条任意线的方法。它允许绘制水平线和垂直线(与和,例如),但我没有看到如何通过两个给定的点划一条线和。有办法吗?有没有简单的方法? 问题答案: 从matplotlib 3.3开始,您可以使用进行操作。

  • 问题内容: 我正在尝试使用2D 绘制一条线,但是该线出现在所有其他组件上,从而使它们不可见。我该如何解决这个问题? 这是代码: 问题答案: 更多提示 在EDT上创建GUI。有关更多详细信息,请参见Swing中的并发。 使用@nIcEcOw建议的,而不是覆盖。再次,首先调用该方法。 不扩展框架,仅使用一个实例。使用来根据组件所需的空间设置尺寸。

  • 问题内容: 第一次使用BezierPaths,想知道实际上应该如何实现此功能。当前,贝塞尔曲线路径在图像的框架内移动,与在屏幕上绘制相反。 有更好的方法吗? 问题答案: 最终这样做:

  • 问题内容: 假设我有一个(x,y)对于一条线的起点始终是相同的,并且(x,y)对于同一条线的终点是变化的。该行也总是40px长。在程序开始时,该线以垂直方向开始(称为0度)。根据用户输入,我需要通过仅更改端点(x,y)从其原点开始重画特定角度的线条。 如果需要,可以考虑使用更多食物: 我很想计算这个并使它在Java中工作。我可以使数学基于圆弧段的弧长来计算点,但是我不知道如何使Java做到这一点。

  • 问题内容: http://marakana.com/tutorials/android/2d-graphics-example.html 我在下面使用这个例子。但是,当我在屏幕上移动手指的速度太快时,线条会变成单个点。 我不确定是否可以加快绘图速度。或者,我应该用一条直线连接最后两个点。这两种解决方案中的第二种似乎是一个不错的选择,除了非常快速地移动手指时,您会得到一条较长的直线段,然后是清晰的曲

  • 我正在基于谷歌的hello_ar_java示例应用程序,围绕这个Agora ARcore演示构建我的应用程序。 此应用程序将捕获用户的点击,并检查是否在场景中找到任何平面。如果是,请在该点创建一个锚点。 我想在各种锚之间画一条线。 我在网上找到的所有东西都使用场景窗体和片段。 目前,我已经设法实现了没有arFraium但行不显示,可能是因为这种方法,我不知道如何取代没有arFrature: 要在我