SVG: draw text on a image
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>geovindu</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<script src="js/jquery-3.6.0.js"></script>
<script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='bootstrap/4.6.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<h1>Non-Scaling SVG</h1>
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="coin" x2="50%" y2="40%" spreadMethod="reflect">
<stop stop-color="gold" offset="30%" />
<stop stop-color="goldenrod" offset="70%" />
<stop stop-color="white" offset="82%" />
<stop stop-color="gold" offset="92%" />
<stop stop-color="darkgoldenrod" offset="100%" />
</linearGradient>
<radialGradient id="pot" fx="30%" fy="35%">
<stop stop-color="white" offset="0%" />
<stop stop-color="gold" offset="15%" />
<stop stop-color="goldenrod" offset="80%" />
<stop stop-color="darkgoldenrod" offset="100%" />
</radialGradient>
<symbol id="potofgold" >
<g fill="url(#coin)" stroke="darkgoldenrod" stroke-width="0.5">
<circle r="5" transform="translate(30,7)" />
<circle r="5" transform="translate(35,13)" />
<circle r="5" transform="translate(22,10)" />
<circle r="5" transform="translate(27,9)" />
<circle r="5" transform="translate(18,17)" />
<circle r="5" transform="translate(42,18)" />
<circle r="5" transform="translate(32,19)" />
<circle r="5" transform="translate(30,14)" />
<circle r="5" transform="translate(25,15)" />
<circle r="5" transform="translate(37,19)" />
<circle r="5" transform="translate(31,16)" />
<circle r="5" transform="translate(20,18)" />
<circle r="5" transform="translate(26,21)" />
</g>
<path fill="url(#pot)" stroke="#751" stroke-width="0.5"
d="M30,50 C45,50 55,45 55,35
Q 55,27 50,25 C55,22 53,15 45,20
S 23,25 15,20 S5,22 10,25
Q 5,27 5,35 C5,45 15,50 30,50Z"
/>
</symbol>
</svg>
<figure>
<figcaption>50x25</figcaption>
<div>
<svg width="50" height="25">
<use xlink:href="#potofgold"/>
</svg>
</div>
</figure>
<figure>
<figcaption>100x50</figcaption>
<div>
<svg width="100" height="50">
<use xlink:href="#potofgold"/>
</svg>
</div>
</figure>
<figure>
<figcaption>200x100</figcaption>
<div>
<svg width="200" height="100">
<use xlink:href="#potofgold"/>
</svg>
</div>
</figure>
<figure>
<figcaption>200x50</figcaption>
<div>
<svg width="200" height="50">
<use xlink:href="#potofgold"/>
</svg>
</div>
</figure>
<figure>
<figcaption>50x50</figcaption>
<div>
<svg width="60" height="50">
<use xlink:href="#potofgold"/>
</svg>
</div>
</figure>
<figure>
<figcaption>Default Size</figcaption>
<div>
<svg>
<use xlink:href="#potofgold"/>
</svg>
</div>
</figure>
</div>
<div class="Charting" id="MetricContainer" width="500" height="500" style="height:100%;width:100%;">
<svg height="100%" width="100%" viewBox="0 0 500 525">
<g>
<image x="20" y="20" xlink:href="./pc/1.png">
<text x="10" y="20" transform="rotate(25 40,50)" fill="red">Rotated SVG text</text>
<text x="10" y="150" transform="rotate(55 40,50)" fill="#000000">2022-11-20</text>
<text x="20" y="40"
transform="rotate(30 20,40)"
style="stroke:none; fill:#000000;"
>Rotated SVG text</text>
</g>
</svg></div>
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20" style="writing-mode: tb;">
Vertical
</text>
</svg>
<img src="flower.svg" class="fa-square-full"/>
<svg xmlns="http://www.w3.org/2000/svg">
<text x="10" y="20" style="writing-mode: tb;">
垂直文字
</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<text x="20" y="40"
transform="rotate(30 20,40)"
style="stroke:none; fill:#000000;"
>Rotated SVG text</text>
</svg>
<div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<image x="20" y="20"
xlink:href="./pc/1.png" />
<text id="txt" x="180" y="770" transform="rotate(5 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
</svg>
</div>
<div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<image x="20" y="20"
xlink:href="./pc/2.png" />
<text id="txt" x="210" y="750" transform="rotate(3 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
</svg>
</div>
<div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<image x="20" y="20"
xlink:href="./pc/4.png" />
<text id="txt" x="210" y="760" transform="rotate(-13 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
</svg>
</div>
<div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<image x="20" y="20"
xlink:href="./pc/5.png" />
<text id="txt" x="180" y="740" transform="rotate(-4 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
</svg>
</div>
<div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg">
<image x="20" y="20"
xlink:href="./pc/6.png" />
<text id="txt" x="180" y="730" transform="rotate(-1 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
</svg>
</div>
</body>
</html>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150" height="200" viewBox="0 0 150 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Flower SVG File</title>
<defs>
<g id="petal">
<path d="M 10 0 Q 27 -15 40 0 27 15 10 0" />
</g>
</defs>
<filter id="glow">
<feColorMatrix type="matrix" values="0 0 0 0 0
0 0 0 0.9 0
0 0 0 0.9 0
0 0 0 0 1 0"></feColorMatrix>
<feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur>
<feMerge>
<feMergeNode in="coloredBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<g id="flower">
<path d="M 50 50 Q 40 70, 70 100 T 70 150"
style="stroke: green; fill: none; stroke-width: 3;"/>
<path d="M 70 100 Q 80 70, 120 80, 90 75, 75 105"
style="stroke: none; fill: green;"/>
<circle cx="40" cy="50" r="10" style="fill: gray;"/>
<g style="stroke: black; fill: yellow;">
<use xlink:href="#petal" transform="translate(40,50)"/>
<use xlink:href="#petal" transform="translate(40,50)
rotate(40)"/>
<use xlink:href="#petal" transform="translate(40,50)
rotate(80)"/>
<use xlink:href="#petal" transform="translate(40,50)
rotate(120)"/>
<use xlink:href="#petal" transform="translate(40,50)
rotate(160)"/>
<use xlink:href="#petal" transform="translate(40,50)
rotate(200)"/>
<use xlink:href="#petal" transform="translate(40,50)
rotate(240)"/>
<use xlink:href="#petal" transform="translate(40,50)
rotate(280)"/>
<use xlink:href="#petal" transform="translate(40,50)
rotate(320)"/>
</g>
</g>
<text x="90" y="50" style="filter: url(#glow)fill:#003333; font-size: 18;">Sping<tspan x="90" y="70">Flower</tspan></text>
</svg>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="250" viewBox="0 0 400 250"
onload="init(evt)"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<script type="text/ecmascript"><![CDATA[
var scaleChoice = 1;
var scaleFactor = [1.25, 1.5, 1.75];
var slideChoice = -1;
var rgb = [100, 100, 100];
function init(evt)
{
var obj;
for (var i = 0; i < 3; i++) {
obj = document.getElementById("scale" + i);
obj.addEventListener("click", clickButton, false);
obj = document.getElementById("sliderGroup" + i);
obj.addEventListener("mousedown", startColorDrag, false);
obj.addEventListener("mousemove", doColorDrag, false);
obj.addEventListener("mouseup", endColorDrag, false);
}
document.getElementById("eventCatcher").
addEventListener("mouseup", endColorDrag, false);
if (parent) {
parent.setShirtColor = svgSetShirtColor;
}
transformShirt();
}
function clickButton(evt)
{
var choice = evt.target.parentNode
var name = choice.getAttribute("id");
var old = document.getElementById("scale" + scaleChoice);
old.removeAttribute("class");
choice.setAttribute("class", "selected");
scaleChoice = parseInt(name[name.length - 1]);
transformShirt();
}
function transformShirt()
{
var factor = scaleFactor[scaleChoice];
var obj = document.getElementById("shirt");
obj.setAttribute("transform",
"translate(150, 150) " +
"scale(" + factor + ")");
obj.setAttribute("stroke-width",
1 / factor);
}
/*
* Stop dragging the current slider (if any)
* and set the current slider to the one specified.
* (0 = red, 1 = green, 2 = blue)
*/
function startColorDrag(evt)
{
var sliderId = evt.target.parentNode.getAttribute("id");
endColorDrag( evt );
slideChoice = parseInt(sliderId[sliderId.length - 1]);
}
/*
* Set slider choice to -1, indicating that no
* slider is begin dragged. No access to the event
* is needed for this function.
*/
function endColorDrag( )
{
/*
* If a slider was being moved, send the slider number
* and its value back to the updateHTMLField function
* in the parent web browser window.
*/
if (slideChoice >= 0)
{
if (parent)
{
parent.updateHTMLField(slideChoice, rgb[slideChoice]);
}
}
// In any case, nobody's being dragged now
slideChoice = -1;
}
function svgSetShirtColor(which, percent)
{
var obj;
var colorStr;
var newText;
if (percent < 0) { percent = 0; }
if (percent > 100) { percent = 100; }
obj = document.getElementById("slide" + which);
obj.setAttribute("y1", 100 - percent);
obj.setAttribute("y2", 100 - percent);
rgb[which] = percent;
colorStr = "rgb(" + rgb[0] + "%," +
rgb[1] + "%," + rgb[2] + "%)";
obj = document.getElementById("shirt");
obj.style.setProperty("fill", colorStr, null);
}
function doColorDrag(evt)
{
if (slideChoice >= 0)
{
var sliderId = evt.target.parentNode.getAttribute("id");
chosen = parseInt(sliderId[sliderId.length - 1]);
if (slideChoice == chosen)
{
svgSetShirtColor(slideChoice, 100 - (evt.clientY - 10));
}
}
}
]]></script>
<style type="text/css" > <![CDATA[
svg { /* default values */
stroke: black;
fill: white;
}
g.selected rect {
fill: #ffc; /* light yellow */
}
text {
stroke: none;
fill:black;
text-anchor: middle;
}
g.slider rect {
stroke: none; /* default white fill still applies */
}
line.slider {
stroke: gray;
stroke-width: 2;
}
]]></style>
<path id="shirt-outline"
d="M -6 -30 -32 -19 -25.5 -13 -22 -14 -22 30 23 30
23 -14 26.5 -13 33 -19 7 -30
A 6.5 6 0 0 1 -6 -30"/>
</defs>
<rect id="eventCatcher" x="0" y="0" width="400" height="300"
style="fill: none; stroke:none;" pointer-events="visible" />
<g id="shirt" >
<use xlink:href="#shirt-outline" x="0" y="0"/>
</g>
<g id="scale0" >
<rect x="100" y="10" width="30" height="30" />
<text x="115" y="30">S</text>
</g>
<g id="scale1" class="selected">
<rect x="140" y="10" width="30" height="30" />
<text x="155" y="30">M</text>
</g>
<g id="scale2" >
<rect x="180" y="10" width="30" height="30" />
<text x="195" y="30">L</text>
</g>
<g id="sliderGroup0" transform="translate( 230, 10 )">
<rect x="-10" y="-5" width="40" height="110"/>
<rect x="5" y="0" width="10" height="100" style="fill: red;"/>
<line id="slide0" class="slider"
x1="0" y1="0" x2="20" y2="0" />
</g>
<g id="sliderGroup1" transform="translate( 280, 10 )">
<rect x="-10" y="-5" width="40" height="110"/>
<rect x="5" y="0" width="10" height="100" style="fill: green;"/>
<line id="slide1" class="slider"
x1="0" y1="0" x2="20" y2="0" />
</g>
<g id="sliderGroup2" transform="translate( 330, 10 )">
<rect x="-10" y="-5" width="40" height="110"/>
<rect x="5" y="0" width="10" height="100" style="fill: blue;"/>
<line id="slide2" class="slider"
x1="0" y1="0" x2="20" y2="0" />
</g>
</svg>
https://github.com/heathcliff/css3-mediaqueries-js
https://github.com/GestiXi/image-scale
https://github.com/sdras/svg-workshop
https://github.com/oreillymedia/svg-essentials-examples
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
浙公网安备 33010602011771号