html中svg标签的简单实用 - Rayln - ITeye博客

`

rayln

浏览: 434087 次
性别:
来自: 上海

最近访客更多访客>>

jis117

fkshl

u011893509

huangliulove

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

IThead：纠结了几天，用了你的方法，现在解决了，谢谢！
Eclipse 写Javascript卡死问题
Rubicon__：你好，我在运用PageWidget这个类时，出现第一页翻到第二 ...
android翻书效果实现原理（贝塞尔曲线绘制原理/点坐标计算）
lionios：如果不显示printDialog，则打印出来的是空白页，请问你 ...
Print打印机例子
rayln： weiqiulai 写道哥们儿，我怎么没有看到监控队列的配置和 ...
JMS监听MQ实例
weiqiulai：哥们儿，我怎么没有看到监控队列的配置和代码？
JMS监听MQ实例

html中svg标签的简单实用

博客分类：

Html4&Css2

阅读更多

请看例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>

<body>
	
	<svg width="100%" height="100%" >
		<path fill="none" stroke="#426ab3" stroke-linecap="butt" stroke-width="6" stroke-linejoin="round" stroke-opacity="1" transform="matrix(1,0,0,1,0,0)" d="M250 150 L150 350 L350 350 Z" />
		<circle r="5" cx="250" cy="150" fill="#426ab3"/>
		<text style="font-size:15" x="220" y="300">I like svg</text>
	</svg>
</body>
</html>

分享到：

CSS3伪类选择器 | canvas是如何绘画基本shape的（矩形、直线 ...

2012-05-21 15:55
浏览 2209
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

.net 将SVG标签代码转成图片格式: 本文将详细介绍如何在VS2012中使用.NET框架和SVG.dll库将SVG标签代码转换为PNG图片。首先，你需要安装一个名为SVG.NET的库，这是一个用于.NET平台的SVG解析器和渲染引擎。在本例中，我们已经有了`Svg.dll`，这意味...

Python-djangoinlinesvg一个Django的简单SVG模板标签: 【Python-djangoinlinesvg：一个Django的简单SVG模板标签】在Web开发中，SVG（Scalable Vector Graphics）由于其可缩放性、高质量的图像显示以及对动画的良好支持，越来越受到开发者们的青睐。在Django这个流行的...

12种炫酷html5 svg加载loading动画特效: 此外，SVG代码可以被直接内嵌到HTML文档中，也可以通过链接外部SVG文件的方式引入，就像这个插件中使用的那样，使用`<img>`标签调用SVG文件。在这12种加载动画特效中，可能包括了旋转、脉冲、螺旋、环形、线条动态...

HTML5 SVG动画404页面，活泼有趣，适合用在网站404页面，兼容主流浏览器: 在HTML5中，我们可以直接将SVG代码内联插入到文档中，或者通过`<object>`或`<img>`标签引用外部SVG文件。在制作HTML5 SVG动画404页面时，有以下关键知识点： 1. **SVG元素和属性**：了解SVG的基本元素，如`<rect>...

HTML5 SVG创意圆圈旋转时钟动画特效: 总结来说，这个"HTML5 SVG创意圆圈旋转时钟动画特效"结合了HTML5的SVG矢量图形、CSS3的动画特性以及JavaScript的实时动态更新，创造出一款既美观又实用的时钟界面。这种技术的应用不仅限于时钟，还能推广到各种创意...

全国各省市SVG地图.zip: 在HTML中，可以直接嵌入SVG代码，或者通过`<object>`或`<img>`标签引用SVG文件。通过CSS和JavaScript，可以进一步定制地图的样式和交互功能。例如，可以使用JavaScript库如D3.js来处理SVG元素，实现地图的动态渲染，...

html5 svg炫酷页面loading加载切换页面效果: 在这款"html5 svg炫酷页面loading加载切换页面效果"中，开发者巧妙地利用了这两种技术，创造出一个既实用又吸引人的页面加载过渡动画。 HTML5是现代网页开发的标准，它引入了许多新特性，比如离线存储、拖放功能、...

HTML5 SVG交互式取色特效.zip: 开发者可以在这个文件中找到如何将SVG元素与JavaScript交互的示例，例如使用`<svg>`标签创建图形，以及如何使用CSS样式来控制图形的外观。 "js"文件夹可能包含JavaScript代码，这是实现颜色选择器动态特性的关键。...

html g标签的作用及使用方法.zip: 在SVG中，`<g>`标签是一个非常基础且实用的元素，它代表了“组”(group)。它的主要功能是将多个SVG元素组合在一起，形成一个整体，便于管理和操作。通过`<g>`标签，你可以对一组图形进行一次性的变换（如旋转、缩放...

这是一款使用html5svg和css3制作的炫酷select下拉菜单美化效果: 在下拉菜单中，SVG可以用于制作精致的箭头图标或其他装饰元素，同时，SVG还支持内联样式和JavaScript操作，使其在动态效果中非常实用。 JavaScript在此项目中的角色主要是增强交互性和动态性。例如，当用户点击下拉...

SVG实现Loading加载按钮动画图标特效.zip: 在HTML5中，SVG得到了广泛支持，可以直接使用`<svg>`标签创建图形，或者通过`<img>`标签引用SVG文件。此外，CSS可以用来控制SVG元素的样式，JavaScript可以用于增加交互性。 3. 加载动画：加载动画通常在用户等待...

HTML5 SVG爆裂式动画弹出窗口代码.zip: HTML5和SVG（可缩放矢量图形）是现代网页开发中的重要技术，它们结合使用可以创建出丰富、动态的视觉效果。在这个“HTML5 SVG爆裂式动画弹出窗口代码”项目中，开发者利用这两种技术实现了点击按钮后出现的爆裂式...

SVG精髓图书英文版: 4. **SVG与HTML的结合**：介绍如何在HTML文档中嵌入SVG，包括`<svg>`标签的使用、内联SVG和外部SVG文件引用，以及与JavaScript的交互。 5. **滤镜和效果**：探讨SVG的滤镜效果，如模糊、渐变、光照等，以及如何使用...

HTML5 SVG分段步骤进度条加载特效.rar: HTML5和SVG（可缩放矢量图形）是现代网页开发中的关键技术，它们共同为创建交互式、动态和视觉上吸引人的元素提供了强大的工具。在本文中，我们将深入探讨"HTML5 SVG分段步骤进度条加载特效"这一主题，这是一种在...

HTML5 SVG+TweenMax.js全屏背景图片切换特效.zip: 在HTML5中，SVG可以直接内嵌到文档中，或者通过`<img>`标签作为外部资源引入。 TweenMax.js是一个JavaScript库，属于GreenSock动画平台的一部分，它提供了一套强大的工具来创建平滑、高性能的动画。这个库允许...

SVG经典教程2 (SVG从入门到精通): 本教程“SVG经典教程2”是SVG学习的初级教程，旨在帮助初学者深入理解并掌握SVG的核心概念和实用技巧。 ### 1. SVG的基本概念 SVG图像由一系列几何形状组成，如线条、矩形、圆形、曲线等，这些形状在放大或缩小时仍...

HTML5 SVG柴火燃烧火焰动画特效.zip: 本压缩包"HTML5 SVG柴火燃烧火焰动画特效.zip"中包含了一套实用的HTML5和SVG结合实现的火焰燃烧动画特效。这个特效可能被用于网站背景、互动元素或者游戏设计中，为用户带来更生动、真实的视觉体验。jQuery，一个...

SVG 开发实践源码: HTML则可以将SVG嵌入网页中，或者使用`<object>`或`<iframe>`标签来引用SVG文件。 7. **优化SVG**：为了提高性能和减少文件大小，可以对SVG进行优化。例如，删除不必要的元素，使用符号（symbol）和视图盒...

HTML5 SVG卡通进度条代码.zip: 首先，我们要了解HTML5的`<svg>`标签，它是创建SVG图形的基础。通过定义宽度、高度以及内部的SVG元素，如矩形、圆形、路径等，我们可以构建出各种形状和图形。在进度条中，通常会有一个容器矩形代表总进度，一个填充...

HTML5中的SVG属性实现圆形进度条效果.zip: 首先，SVG在HTML5中的应用主要是通过`<svg>`标签来创建图形。这个标签允许我们定义图形的宽度、高度以及包含的图形元素。在圆形进度条的例子中，我们可能会创建一个圆形路径，用以表示进度条的轨道，并用另一条路径...

Global site tag (gtag.js) - Google Analytics