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. 破解JS加密：url unicode加密而已

    加密所在的地方:http://tool.chinaz.com/Tools/UrlCrypt.aspx?url=www.baidu.com 结果: http://%77%77%77%2E%62%61%6 ...

  2. Combox下拉绑定DataGridView

    这个Combox下拉很多人都在用  但其中绘制的语句如下: #endregion #region 方法 #region 绘制DataGridView以及下拉DataGridView private v ...

  3. 「CSS3 」3D效果 & 透视

    CSS3d透视 perspective属性 原文链接:https://segmentfault.com/a/1190000003843764

  4. Java谜题——类谜题（二）

    1.域的隐藏 代码如下: class Base { public String className = "Base"; } class Derived extends Base { ...

  5. HDU 1068 Girls and Boys 二分图最大独立集（最大二分匹配）

    Girls and Boys Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  6. FreeRTOS代码剖析

    FreeRTOS代码剖析之1:内存管理Heap_1.c   FreeRTOS代码剖析之2:内存管理Heap_2.c   FreeRTOS(V8.0.1)系统之xTaskGenericCreate() ...

  7. 在阿里云ECS（CentOS6.5）上安装mysql

    首先查看服务器上是否已经安装过mysql 命令: rpm -qa | grep mysql 结果: 可以看到ECS上已经有mysql-libs这个包了.这并不影响安装. 查看yum服务器上提供的mys ...

  8. 用PS给图标添加外发光效果

    最近在做app的时候用到了图标需要根据点击和非点击显示两种状态(原始状态和外发光状态). 如下图: 没办法,因为这是毕业设计的东西,总不能叫同事帮忙处理下.所以自己充当了回美工. 做法如下: 1.打开 ...

  9. SSL 双向认证

    利用OpenSSL生成库和命令程序,在生成的命令程序中包括对加/解密算法的测试,openssl程序,ca程序.利用openssl,ca可生成用于C/S模式的证书文件以及CA文件.下面以C/S模式说明证 ...

  10. AFNetworking封装思路简析

    http://blog.csdn.net/qq_34101611/article/details/51698473 一.AFNetworking的发展 1. AFN 1.0版本 AFN 的基础部分是 ...