svg defs 进行定义 引用：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

</head>

<body>

<svg width="240px" height="240px" xmlnx="http://www.w3.org/2000/svg" >

    <defs>

        <g id="house" style="stroke:black">

            <rect x="0" y="41" width="60" height="60"/>

            <polyline points="0 41,30 0,60 41"/>

            <polyline points="30 101,30 71,44 71,44 101"/>

        </g>

        <rect id="rect01" x="0" y="0" width="10" height="10" />

    </defs>

    <use xlink:href="#house" x="0" y="0" style="fill:#ccffcc;" />

    <use xlink:href="#house" x="120" y="0" style="fill:#99f;" />

    <use xlink:href="#house" x="65" y="105" style="fill:#c00;" />

    <use xlink:href="#rect01" x="0" y="130" />

</svg>

</body>

</html>

svg defs 进行定义 引用的更多相关文章

  1. D3中的each() 以及svg defs元素 clipPath的使用

    each() 方法允许我们定制对选择集中DOM元素的处理行为: selection . each ( func ) 参数 func 是调用者定义的函数,在d3中被称为 访问器/accessor . d ...

  2. vue学习(八) vue中样式 class 定义引用

    //style<style> .red{ color:red; } .thin{//字体粗细 font-weight:200 } .italic{//字体倾斜 font-style:ita ...

  3. SVG 学习（一）

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...

  4. SVG图形引用、裁切、蒙版

    SVG图形引用.裁切.蒙版,使用三个标签: 1. <use>标签创建图形引用 2. <clipPath>标签裁切图形 3. <mask>标签创建蒙版  ...

  5. SVG 2D入门7 - 重用与引用

    前面介绍了很多的图形元素,如果很多图形本身是一样的,需要每次都去定义一个新的么?我们能否共用一些图形呢?这是这节的重点 - SVG元素的重用. 组合 - g元素      g元素是一种容器,它组合一组 ...

  6. SVG.js 图案使用和use引用

    一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.patt ...

  7. C++---类成员变量定义为引用

    摘要:类成员变量是可以定义为引用类型的,但是我们需要注意一下用法 note1:在类中定义引用变量, 必须要在初始化列表中初始化该成员变量(const 类型数据成员也必须在初始化列表中进行初始化) #i ...

  8. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  9. 如何给SVG填充和描边应用线性渐变

    给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...

随机推荐

  1. sql查询技巧，按时间分段进行分组，每半小时一组统计组内记录数量

    今天拿到一个查询需求,需要统计某一天各个时间段内的记录数量. 具体是统计某天9:00至22:00时间段,每半小时内订单的数量,最后形成的数据形式如下: 时间段          订单数 9:00~9: ...

  2. Win7+QTP10.0+IE9无法启动IE的解决方法

    请安装QTP补丁QTP_00626. 更多补丁请查阅:http://www.cnblogs.com/testware/archive/2010/10/13/1849985.html

  3. 'xcopy' 'ipconfig'。。。 不是内部或外部命令，也不是可运行的程序 或批处理文件

    最近在win8下安装软件的时候,总是报 "xxx不是内部或外部命令,也不是可运行的程序 或批处理文件" 的错误 . 百思不得其解  打开cmd 或 powerShell 输入xco ...

  4. 线段树扫描线 HDU 1542

    n个矩形 问他们覆盖的面积重复的就算一次 x数组存线段  然后根据横坐标排一下 z 线段树 l - r   就是1 ~ 2*n #include<stdio.h> #include< ...

  5. svn branching and merging

    the svn switch command is an alternative way to creating a working copy of a branch :) You can merge ...

  6. git 以及 github 使用系列

    本人打算开始写一个有关git 使用,以及github 使用的系列文章了,一来可以自己总结,二来github用好了,可以存放自己的一些知识框架吧. 1.准备 : 有一个 github上的账号, wind ...

  7. CentOS 6.4 利用 Awstats 7.2 分析 Nginx 日志

    一.配置Nginx 日志分割 (略) 二.配置FCGI 1.安装CPAN wget http://search.cpan.org/CPAN/authors/id/A/AN/ANDK/CPAN-2.00 ...

  8. 控制流之while

    while语句只要在一个条件为真的情况下,while语句允许你重复执行一块语句.while语句是所谓 循环 语句的一个例子.while语句有一个可选的else从句.使用while语句~~~~~~~~~ ...

  9. Windwos下 php mysql apache 环境配置

    一.下载所需软件: 1.安装Windows组件: 安装Apache的前  必须安装  VC11 vcredist_x86.exe (64位请下载vcredist_x64.exe),选择时尽量选择英文版 ...

  10. 8、手把手教你Extjs5（八）自定义菜单2

    这一节来定义另外三种类型的菜单类.首先定义菜单按钮类.文件放于app/view/main/region目录下面,文件名为ButtonMainMenu.js. /** * 显示在顶部的按钮菜单,可以切换 ...