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. HDU 1896 Stones（优先队列）

    还是优先队列 #include<iostream> #include<cstdio> #include<cstring> #include<queue> ...

  2. C#使用FFmpeg 将视频格式转换成Gif图片示例

    根据EFmpeg封装的视频转换gif工具:https://my.oschina.net/tianma3798/blog/825317 一.本次使用参数说明 /* * 参数说明: * -i 源文件位置 ...

  3. 使用Jetty搭建Java Websocket Server，实现图像传输

    https://my.oschina.net/yushulx/blog/298140 How to Implement a Java WebSocket Server for Image Transm ...

  4. Navicate for mysql 数据库设计-数据库分析

    在使用Navicate for mysql进行数据库设计时,如果要分析已有db的表结构,则可以将已经分析过的表放入一个新建的组中,把精力更加集中在剩下的表中,以免受到干扰.

  5. armstrong's programming erlang 2nd

    Re: json handling map functions in erlang 17 I have not read Joes final book on the matter (several ...

  6. UIScroll和UIPickView

    .h #import <UIKit/UIKit.h> #define WIDTH self.view.frame.size.width #define HEIGHT self.view.f ...

  7. MRC的下setter访问器的两种形式

    // Person复合了Phone和Room // 第一种:比较合理 先判断对象形参传递的对象和原属性是否一致,不一致在释放旧值,给形参传递的值retain,因为retain方法会返回该对象,因此可以 ...

  8. ubuntu上安装vsftp-使用java进行匿名链接

    检查环境: 1. 检查是否装过了ftp服务器 如果没有提示内容折,本机没有安装. root@hadoops:~# rpm -qa|grep vsftpdroot@hadoops:~# rpm -qa| ...

  9. PHP获取当期前运行文件的路径，名字，服务器路径

    <?phpecho "显示脚本文件的相对路径和文件名:\"".$_SERVER["PHP_SELF"]."\"<br& ...

  10. MS SQL Server数据库修复/MDF数据文件数据恢复/MDF质疑/mdf无法附加

    微软的SQL Server 数据库最常用的有两种类型的文件: 1.主要数据文件,文件后缀一般是.MDF: 2.事务日志文件,文件后缀一般是.LDF. 用户数据表.视图.存储过程等等数据,都是存放在MD ...