Skip to content

Instantly share code, notes, and snippets.

@belocer

belocer/index.html

Created October 2, 2020 12:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save belocer/49f00f1d46d5be546253d9d71df95e63 to your computer and use it in GitHub Desktop.
Save belocer/49f00f1d46d5be546253d9d71df95e63 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Варианты работы
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg</title>
<style>
svg {
width: 100%;
height: 100%;
border: 2px solid darkolivegreen;
}
</style>
</head>
<body>
<svg width="200" height="300" xmlns="http://www.w3.org/2000/svg"
viewBox="10 10 500 500"
preserveAspectRatio="xMaxYMax"
>
<!-- Прямогуольник -->
<rect
x="20"
y="20"
width="70"
height="150"
rx="100"
ry="25"
fill="darkred"
stroke="darkgreen"
stroke-width="3"
stroke-opacity="0.7"
></rect>
<rect
x="50"
y="50"
width="70"
height="150"
rx="100"
ry="25"
fill="darkred"
stroke="darkblue"
stroke-width="3"
stroke-opacity="0.7"
></rect>
<circle
cx="175"
cy="175"
r="20"
fill="darkgreen"
stroke="darkblue"
stroke-width="3"
></circle>
<ellipse
cx="280"
cy="80"
rx="60"
ry="10"
stroke="red"
stroke-width="3"
fill="transparent"
></ellipse>
<line
x1="50"
y1="50"
x2="250"
y2="250"
stroke="#777777"
stroke-width="3"
>
</line>
<polyline
points="10 20, 40 30, 70 100"
></polyline>
<polygon
points="100 200, 400 300, 700 150"
stroke="red"
stroke-width="3"
fill="transparent"
></polygon>
<path
stroke="black"
d="M150,300 L150,150 M180,400 L150,150 L180,250z"
stroke-width="3"
fill="transparent"
></path>
</svg>
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="linearG" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00f"></stop>
<stop offset="50%" stop-color="#f0f"></stop>
<stop offset="100%" stop-color="#0f0"></stop>
</linearGradient>
<rect x="0" y="0" width="100" height="100" fill="url(#linearG)"></rect>
</svg>
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="linearText" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00f"></stop>
<stop offset="50%" stop-color="#f0f"></stop>
<stop offset="100%" stop-color="#0f0"></stop>
</linearGradient>
<text x="300" y="300" width="100" height="100" fill="url(#linearText)">Белоцерковец Денис</text>
</svg>
<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="linearText" x1="0" y1="0" x2="0" y2="0">
<stop offset="0%" stop-color="#00f"></stop>
<stop offset="50%" stop-color="#f0f"></stop>
<stop offset="100%" stop-color="#0f0"></stop>
</linearGradient>
<text x="300" y="70" width="100" height="100" fill="url(#linearText)">
<tspan x="0" y="10">Белоцерковец Денис</tspan>
<tspan x="0" y="30">Белоцерковец Денис</tspan>
<tspan x="0" y="50">Белоцерковец Денис</tspan>
</text>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment