svg defs 进行定义 引用

时间：2023-03-10 01:03:54
svg defs 进行定义 引用

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>

相关文章