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. js中判断输入框是否为空（判断是一串空的字符串）

    function ltrim(str) {  if(str.length==0)    return(str);   else {    var idx=0;    while(str.charAt( ...

  3. CSS文字垂直居中和font-family属性

    1.单行文字的垂直居中 单行文字垂直居中比较简单,直接让行高==盒子高度即可. 2.多行文字居中 多行文字居中,只需简单计算一下盒子的上padding即可.计算公式:padding-top=(盒子的高 ...

  4. The 2014 ACM-ICPC Asia Regional Anshan

    继续复盘下一场Regional! [A]-_-/// [B]模拟(之前每次遇到模拟.暴搜都直接跳了,题目太长也是一个原因...下次是在不行可以尝试一下) [C]数论 互质.容斥? [D]数学推导(方差 ...

  5. iOS之UILabel自适应大小

    //初始化一个label self.label=[[UILabel alloc] init]; //设置自动行数与字符换行 [self.label setNumberOfLines:0]; //给la ...

  6. frame间跳转及相关问题

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. python字符串,列表,字典的常用方法

    本篇内容 字符串的常用方法 列表的常用方法 字典的常用方法 字符串的常用方法 center 字符居中显示,指定字符串长度,填充指定的填充字符 string = "40kuai" p ...

  8. GIT使用规范流程

    1:每次开发新功能时,都应该新建立一个独立的分支(branch),整个项目工程有且只有一个主分支(master branch),项目发版时是从主分支上发布. Step01:切换到主分支 $ git c ...

  9. mac android studio 更新sdk的解决方案

    试试这个,能解决国内访问Google服务器的困难 启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manag ...

  10. MAP--复杂map结构的构造

    我的关键结构比如 struct{     int a;     int b;     int c; }s: 因为这三个数据是基本信息,可以唯一区别一个设备.拿这样一个数据结构作为索引就能找到每个设备. ...