mirror of
https://github.com/swc-project/swc.git
synced 2024-12-27 15:42:51 +03:00
feat(html/minifier): Improve minifier (#5227)
This commit is contained in:
Alexander Akait
GitHub
parent
883a76a73a
commit
1da6016da7
@ -91,6 +91,7 @@ static EVENT_HANDLER_ATTRIBUTES: &[&str] = &[
|
|||||||
"ondrag",
|
"ondrag",
|
||||||
"ondragend",
|
"ondragend",
|
||||||
"ondragenter",
|
"ondragenter",
|
||||||
|
"ondragexit",
|
||||||
"ondragleave",
|
"ondragleave",
|
||||||
"ondragover",
|
"ondragover",
|
||||||
"ondragstart",
|
"ondragstart",
|
||||||
@ -167,6 +168,9 @@ static EVENT_HANDLER_ATTRIBUTES: &[&str] = &[
|
|||||||
"onvisibilitychange",
|
"onvisibilitychange",
|
||||||
"onshow",
|
"onshow",
|
||||||
"onsort",
|
"onsort",
|
||||||
|
"onbegin",
|
||||||
|
"onend",
|
||||||
|
"onrepeat",
|
||||||
];
|
];
|
||||||
|
|
||||||
static ALLOW_TO_TRIM_GLOBAL_ATTRIBUTES: &[&str] = &["style", "tabindex", "itemid"];
|
static ALLOW_TO_TRIM_GLOBAL_ATTRIBUTES: &[&str] = &["style", "tabindex", "itemid"];
|
||||||
@ -226,7 +230,11 @@ static COMMA_SEPARATED_HTML_ATTRIBUTES: &[(&str, &str)] = &[
|
|||||||
("style", "media"),
|
("style", "media"),
|
||||||
];
|
];
|
||||||
|
|
||||||
static COMMA_SEPARATED_SVG_ATTRIBUTES: &[(&str, &str)] = &[("style", "media")];
|
static COMMA_SEPARATED_SVG_ATTRIBUTES: &[(&str, &str)] = &[
|
||||||
|
("style", "media"),
|
||||||
|
("polyline", "points"),
|
||||||
|
("polygon", "points"),
|
||||||
|
];
|
||||||
|
|
||||||
static SPACE_SEPARATED_GLOBAL_ATTRIBUTES: &[&str] = &[
|
static SPACE_SEPARATED_GLOBAL_ATTRIBUTES: &[&str] = &[
|
||||||
"class",
|
"class",
|
||||||
@ -259,6 +267,64 @@ static SPACE_SEPARATED_HTML_ATTRIBUTES: &[(&str, &str)] = &[
|
|||||||
("form", "autocomplete"),
|
("form", "autocomplete"),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
static SPACE_SEPARATED_SVG_ATTRIBUTES: &[(&str, &str)] = &[
|
||||||
|
("svg", "preserveAspectRatio"),
|
||||||
|
("svg", "viewBox"),
|
||||||
|
("symbol", "preserveAspectRatio"),
|
||||||
|
("symbol", "viewBox"),
|
||||||
|
("image", "preserveAspectRatio"),
|
||||||
|
("feImage", "preserveAspectRatio"),
|
||||||
|
("marker", "preserveAspectRatio"),
|
||||||
|
("pattern", "preserveAspectRatio"),
|
||||||
|
("pattern", "viewBox"),
|
||||||
|
("pattern", "patternTransform"),
|
||||||
|
("view", "preserveAspectRatio"),
|
||||||
|
("view", "viewBox"),
|
||||||
|
("path", "d"),
|
||||||
|
// TODO improve me more
|
||||||
|
("textPath", "path"),
|
||||||
|
("animateMotion", "path"),
|
||||||
|
("glyph", "d"),
|
||||||
|
("missing-glyph", "d"),
|
||||||
|
("feColorMatrix", "values"),
|
||||||
|
("feConvolveMatrix", "kernelMatrix"),
|
||||||
|
("text", "rotate"),
|
||||||
|
("tspan", "rotate"),
|
||||||
|
("feFuncA", "tableValues"),
|
||||||
|
("feFuncB", "tableValues"),
|
||||||
|
("feFuncG", "tableValues"),
|
||||||
|
("feFuncR", "tableValues"),
|
||||||
|
("linearGradient", "gradientTransform"),
|
||||||
|
("radialGradient", "gradientTransform"),
|
||||||
|
("font-face", "panose-1"),
|
||||||
|
];
|
||||||
|
|
||||||
|
static SEMICOLON_SEPARATED_SVG_ATTRIBUTES: &[(&str, &str)] = &[
|
||||||
|
("animate", "keyTimes"),
|
||||||
|
("animate", "keySplines"),
|
||||||
|
("animate", "values"),
|
||||||
|
("animate", "begin"),
|
||||||
|
("animate", "end"),
|
||||||
|
("animateColor", "keyTimes"),
|
||||||
|
("animateColor", "keySplines"),
|
||||||
|
("animateColor", "values"),
|
||||||
|
("animateColor", "begin"),
|
||||||
|
("animateColor", "end"),
|
||||||
|
("animateMotion", "keyTimes"),
|
||||||
|
("animateMotion", "keySplines"),
|
||||||
|
("animateMotion", "values"),
|
||||||
|
("animateMotion", "values"),
|
||||||
|
("animateMotion", "end"),
|
||||||
|
("animateTransform", "keyTimes"),
|
||||||
|
("animateTransform", "keySplines"),
|
||||||
|
("animateTransform", "values"),
|
||||||
|
("animateTransform", "begin"),
|
||||||
|
("animateTransform", "end"),
|
||||||
|
("discard", "begin"),
|
||||||
|
("set", "begin"),
|
||||||
|
("set", "end"),
|
||||||
|
];
|
||||||
|
|
||||||
enum CssMinificationMode {
|
enum CssMinificationMode {
|
||||||
Stylesheet,
|
Stylesheet,
|
||||||
ListOfDeclarations,
|
ListOfDeclarations,
|
||||||
@ -410,6 +476,25 @@ impl Minifier<'_> {
|
|||||||
Namespace::HTML => {
|
Namespace::HTML => {
|
||||||
SPACE_SEPARATED_HTML_ATTRIBUTES.contains(&(&element.tag_name, attribute_name))
|
SPACE_SEPARATED_HTML_ATTRIBUTES.contains(&(&element.tag_name, attribute_name))
|
||||||
}
|
}
|
||||||
|
Namespace::SVG => {
|
||||||
|
match attribute_name {
|
||||||
|
"transform" | "stroke-dasharray" | "clip-path" | "requiredFeatures" => {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
_ => {}
|
||||||
|
}
|
||||||
|
|
||||||
|
SPACE_SEPARATED_SVG_ATTRIBUTES.contains(&(&element.tag_name, attribute_name))
|
||||||
|
}
|
||||||
|
_ => false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn is_semicolon_separated_attribute(&self, element: &Element, attribute_name: &str) -> bool {
|
||||||
|
match element.namespace {
|
||||||
|
Namespace::SVG => {
|
||||||
|
SEMICOLON_SEPARATED_SVG_ATTRIBUTES.contains(&(&element.tag_name, attribute_name))
|
||||||
|
}
|
||||||
_ => false,
|
_ => false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -446,6 +531,7 @@ impl Minifier<'_> {
|
|||||||
}
|
}
|
||||||
_ => false,
|
_ => false,
|
||||||
},
|
},
|
||||||
|
Namespace::SVG => matches!(&*element.tag_name, "a" if attribute_name == "rel"),
|
||||||
_ => false,
|
_ => false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -911,7 +997,6 @@ impl Minifier<'_> {
|
|||||||
| "textpath"
|
| "textpath"
|
||||||
| "tspan"
|
| "tspan"
|
||||||
| "use"
|
| "use"
|
||||||
| "symbol’"
|
|
||||||
) =>
|
) =>
|
||||||
{
|
{
|
||||||
WhitespaceMinificationMode {
|
WhitespaceMinificationMode {
|
||||||
@ -1954,30 +2039,32 @@ impl VisitMut for Minifier<'_> {
|
|||||||
if self.is_space_separated_attribute(current_element, &n.name) {
|
if self.is_space_separated_attribute(current_element, &n.name) {
|
||||||
value = value.split_whitespace().collect::<Vec<_>>().join(" ");
|
value = value.split_whitespace().collect::<Vec<_>>().join(" ");
|
||||||
} else if self.is_comma_separated_attribute(current_element, &n.name) {
|
} else if self.is_comma_separated_attribute(current_element, &n.name) {
|
||||||
let is_sizes = matches!(&*n.name, "sizes" | "imagesizes");
|
value = value
|
||||||
|
.split(',')
|
||||||
let mut new_values = vec![];
|
.map(|value| {
|
||||||
|
if matches!(&*n.name, "sizes" | "imagesizes") {
|
||||||
for value in value.trim().split(',') {
|
|
||||||
if is_sizes {
|
|
||||||
let trimmed = value.trim();
|
let trimmed = value.trim();
|
||||||
|
|
||||||
match self.minify_sizes(trimmed) {
|
match self.minify_sizes(trimmed) {
|
||||||
Some(minified) => {
|
Some(minified) => minified,
|
||||||
new_values.push(minified);
|
_ => trimmed.to_string(),
|
||||||
}
|
}
|
||||||
_ => {
|
} else if matches!(&*n.name, "points") {
|
||||||
new_values.push(trimmed.to_string());
|
self.collapse_whitespace(value.trim())
|
||||||
}
|
|
||||||
};
|
|
||||||
} else {
|
} else {
|
||||||
new_values.push(value.trim().to_string());
|
value.trim().to_string()
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
.collect::<Vec<_>>()
|
||||||
value = new_values.join(",");
|
.join(",");
|
||||||
} else if self.is_trimable_separated_attribute(current_element, &n.name) {
|
} else if self.is_trimable_separated_attribute(current_element, &n.name) {
|
||||||
value = value.trim().to_string();
|
value = value.trim().to_string();
|
||||||
|
} else if self.is_semicolon_separated_attribute(current_element, &n.name) {
|
||||||
|
value = value
|
||||||
|
.split(';')
|
||||||
|
.map(|value| self.collapse_whitespace(value.trim()))
|
||||||
|
.collect::<Vec<_>>()
|
||||||
|
.join(";");
|
||||||
} else if current_element.namespace == Namespace::HTML
|
} else if current_element.namespace == Namespace::HTML
|
||||||
&& &n.name == "contenteditable"
|
&& &n.name == "contenteditable"
|
||||||
&& value == "true"
|
&& value == "true"
|
||||||
|
|||||||
@ -370,5 +370,404 @@ big
|
|||||||
<text y="40" xml:space="preserve" alignment-baseline="auto">Preserved spacing</text>
|
<text y="40" xml:space="preserve" alignment-baseline="auto">Preserved spacing</text>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Simple rectangle -->
|
||||||
|
<rect width="100" height="100" onclick="alert('test' + 'test');" />
|
||||||
|
<rect width="100" height="100" onclick="javascript:alert('test' + 'test');" />
|
||||||
|
|
||||||
|
<!-- Rounded corner rectangle -->
|
||||||
|
<rect x="120" width="100" height="100" rx="15" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg>
|
||||||
|
<a href=" test.html " ondragexit="alert( 'test' + 'test' )" rel="
|
||||||
|
nofollow
|
||||||
|
noindex
|
||||||
|
">Test</a>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 100 100" width="160" height="60"
|
||||||
|
preserveAspectRatio=" xMidYMid meet " x="0" y="30">
|
||||||
|
<use href="#smiley" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- polygon is an closed shape -->
|
||||||
|
<polygon stroke="black" fill="none"
|
||||||
|
points="
|
||||||
|
|
||||||
|
50
|
||||||
|
|
||||||
|
,
|
||||||
|
|
||||||
|
0
|
||||||
|
|
||||||
|
21
|
||||||
|
|
||||||
|
,
|
||||||
|
|
||||||
|
90
|
||||||
|
|
||||||
|
98
|
||||||
|
|
||||||
|
,
|
||||||
|
|
||||||
|
35
|
||||||
|
|
||||||
|
2,
|
||||||
|
|
||||||
|
35
|
||||||
|
|
||||||
|
79,
|
||||||
|
|
||||||
|
90" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="60" cy="10" r="10">
|
||||||
|
<animate attributeName=cx dur=4s repeatCount=indefinite values="
|
||||||
|
60;
|
||||||
|
110;
|
||||||
|
60;
|
||||||
|
10;
|
||||||
|
60
|
||||||
|
" keyTimes="
|
||||||
|
0
|
||||||
|
;
|
||||||
|
0.25 ;
|
||||||
|
0.5 ;
|
||||||
|
0.75 ;
|
||||||
|
1"/>
|
||||||
|
<animate attributeName="cy" dur="4s" repeatCount="indefinite"
|
||||||
|
values=" 10; 60; 110; 60; 10 " keyTimes="0; 0.25; 0.5; 0.75; 1"/>
|
||||||
|
</circle>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="60" cy="10" r="10">
|
||||||
|
<animate attributeName="cx" dur="4s" calcMode="spline" repeatCount="indefinite"
|
||||||
|
values="60; 110; 60; 10; 60" keyTimes="0; 0.25; 0.5; 0.75; 1"
|
||||||
|
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"/>
|
||||||
|
<animate attributeName="cy" dur="4s" calcMode="spline" repeatCount="indefinite"
|
||||||
|
values="10; 60; 110; 60; 10" keyTimes="0; 0.25; 0.5; 0.75; 1"
|
||||||
|
keySplines="
|
||||||
|
|
||||||
|
0.5 0
|
||||||
|
|
||||||
|
0.5
|
||||||
|
|
||||||
|
1
|
||||||
|
|
||||||
|
; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="
|
||||||
|
-5
|
||||||
|
-5
|
||||||
|
10
|
||||||
|
10
|
||||||
|
" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!--
|
||||||
|
The point of coordinate 0,0 is now in the center of the viewport,
|
||||||
|
and 100% is still resolve to a width or height of 10 user units so
|
||||||
|
the rectangle looks shifted to the bottom/right corner of the viewport
|
||||||
|
-->
|
||||||
|
<rect x="0" y="0" width="100%" height="100%"/>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
With the point of coordinate 0,0 in the center of the viewport the
|
||||||
|
value 50% is resolve to 5 which means the center of the circle is
|
||||||
|
in the bottom/right corner of the viewport.
|
||||||
|
-->
|
||||||
|
<circle cx="50%" cy="50%" r="4" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Dashes and gaps of various sizes with an even number of values -->
|
||||||
|
<line x1="0" y1="9" x2="30" y2="9" stroke="black"
|
||||||
|
stroke-dasharray="
|
||||||
|
|
||||||
|
4
|
||||||
|
|
||||||
|
1
|
||||||
|
|
||||||
|
2
|
||||||
|
|
||||||
|
3
|
||||||
|
|
||||||
|
" />
|
||||||
|
<rect x="11" y="1" width="8" height="8" stroke="green"
|
||||||
|
clip-path="
|
||||||
|
|
||||||
|
circle()
|
||||||
|
|
||||||
|
|
||||||
|
fill-box
|
||||||
|
|
||||||
|
" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="none" stroke="red"
|
||||||
|
d="M 10,30
|
||||||
|
A 20,20 0,0,1 50,30
|
||||||
|
A 20,20 0,0,1 90,30
|
||||||
|
Q 90,60 50,90
|
||||||
|
Q 10,60 10,30 z
|
||||||
|
" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg width="120" height="120" viewBox="0 0 120 120"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" version="1.1"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
|
||||||
|
<!-- animated rectangles -->
|
||||||
|
<rect x="10" y="35" height="15" width="0">
|
||||||
|
<animate attributeType="XML" attributeName="width" to="50"
|
||||||
|
id="first"
|
||||||
|
begin="
|
||||||
|
0s;
|
||||||
|
|
||||||
|
third.end
|
||||||
|
|
||||||
|
"
|
||||||
|
end="
|
||||||
|
0s;
|
||||||
|
|
||||||
|
third.end
|
||||||
|
|
||||||
|
"
|
||||||
|
dur="4s" />
|
||||||
|
</rect>
|
||||||
|
|
||||||
|
<rect x="60" y="60" height="15" width="0">
|
||||||
|
<animate attributeType="XML" attributeName="width" to="25"
|
||||||
|
id="second" begin="first.end" dur="2s" />
|
||||||
|
</rect>
|
||||||
|
|
||||||
|
<rect x="85" y="85" height="15" width="0">
|
||||||
|
<animate attributeType="XML" attributeName="width" to="25"
|
||||||
|
id="third" begin="second.end" dur="2s" />
|
||||||
|
</rect>
|
||||||
|
|
||||||
|
<!-- grid -->
|
||||||
|
<text x="10" y="20" text-anchor="middle">0s</text>
|
||||||
|
<line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
|
||||||
|
<text x="35" y="20" text-anchor="middle">2s</text>
|
||||||
|
<line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
|
||||||
|
<text x="60" y="20" text-anchor="middle">4s</text>
|
||||||
|
<line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
|
||||||
|
<text x="85" y="20" text-anchor="middle">6s</text>
|
||||||
|
<line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
|
||||||
|
<text x="110" y="20" text-anchor="middle">8s</text>
|
||||||
|
<line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
|
||||||
|
|
||||||
|
<line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
|
||||||
|
<line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg>
|
||||||
|
<filter id="colorMeTheSame">
|
||||||
|
<feColorMatrix in="SourceGraphic"
|
||||||
|
type="matrix"
|
||||||
|
values="1 0 0 0 0
|
||||||
|
0
|
||||||
|
1 0 0 0
|
||||||
|
|
||||||
|
|
||||||
|
0 0
|
||||||
|
|
||||||
|
1 0 0
|
||||||
|
0 0 0
|
||||||
|
1 0" />
|
||||||
|
</filter>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<filter id="convolveMatrix1" x="0" y="0" width="100%" height="100%">
|
||||||
|
<feConvolveMatrix kernelMatrix="
|
||||||
|
|
||||||
|
1
|
||||||
|
|
||||||
|
1
|
||||||
|
0 0 0
|
||||||
|
|
||||||
|
0 0 0
|
||||||
|
|
||||||
|
-1"/>
|
||||||
|
</filter>
|
||||||
|
<filter id="convolveMatrix2" x="0" y="0" width="100%" height="100%">
|
||||||
|
<feConvolveMatrix kernelMatrix="-1 0 0 0 0 0 0 0 1"/>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200"
|
||||||
|
style="filter:url(#convolveMatrix1);"/>
|
||||||
|
<image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200"
|
||||||
|
style="filter:url(#convolveMatrix2); transform:translateX(220px);"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- Apply a transform on the tile -->
|
||||||
|
<pattern id="p1" width=".25" height=".25"
|
||||||
|
patternTransform="rotate(20)
|
||||||
|
skewX(30)
|
||||||
|
scale(1 0.5)">
|
||||||
|
<circle cx="10" cy="10" r="10" />
|
||||||
|
</pattern>
|
||||||
|
|
||||||
|
<!-- Apply the transformed pattern tile -->
|
||||||
|
<rect x="10" y="10" width="80" height="80"
|
||||||
|
fill="url(#p1)" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
|
||||||
|
viewBox="0 0 200 500">
|
||||||
|
<title>Scream—Comic Book text</title>
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: 'SequentialistBB';
|
||||||
|
src: url('fonts/SequentialistBB.woff2') format('woff2'),
|
||||||
|
url('fonts/SequentialistBB.woff') format('woff');
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
text {
|
||||||
|
font-family: SequentialistBB,
|
||||||
|
Papyrus-condensed, Impact,
|
||||||
|
sans-serif-condensed, sans-serif;
|
||||||
|
font-stretch: condensed;
|
||||||
|
writing-mode: tb; /* SVG 1 syntax */
|
||||||
|
glyph-orientation-vertical: 0;
|
||||||
|
writing-mode: vertical-rl; /* CSS3 syntax */
|
||||||
|
text-orientation: upright;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
tspan { font-size: 75%; }
|
||||||
|
path {
|
||||||
|
fill: #fff;
|
||||||
|
stroke: #000;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<path d="M175,495 L140,465 C30,500 40,400 30,200
|
||||||
|
S70,10 100,10 S170,0 170,200 S170,400 150,450 Z" />
|
||||||
|
<text x="100" y="12"
|
||||||
|
rotate="0 15 30 45 60 75 90 105 120 135 150 165 180
|
||||||
|
195 210 225 240 255 270 285 300 315 330 345 360"
|
||||||
|
textLength="450">
|
||||||
|
AAAaaaa<tspan>aaaa<tspan>aaaa<tspan>aahhh!</tspan
|
||||||
|
>!</tspan>!</tspan>!</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="MyPath" fill="none" stroke="silver"
|
||||||
|
|
||||||
|
d="
|
||||||
|
M10,90 Q90,90 90,45
|
||||||
|
|
||||||
|
Q90,10 50,10 Q10,10 10,40 Q10,70
|
||||||
|
|
||||||
|
45,70
|
||||||
|
|
||||||
|
Q70,70
|
||||||
|
75,50" />
|
||||||
|
|
||||||
|
<text>
|
||||||
|
<textPath path="M10,90
|
||||||
|
|
||||||
|
Q90,90 90,45
|
||||||
|
|
||||||
|
Q90,10 50,10
|
||||||
|
Q10,10 10,40 Q10,70 45,70 Q70,70
|
||||||
|
|
||||||
|
75,50">
|
||||||
|
Quick brown fox jumps over the lazy dog.
|
||||||
|
</textPath>
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="gradient" gradientUnits="userSpaceOnUse"
|
||||||
|
x1="0" y1="0" x2="200" y2="0">
|
||||||
|
<stop offset="0" stop-color="#ff0000" />
|
||||||
|
<stop offset="0.5" stop-color="#00ff00" />
|
||||||
|
<stop offset="1" stop-color="#0000ff" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<filter id="componentTransfer1" x="0" y="0" width="100%" height="100%">
|
||||||
|
<feComponentTransfer>
|
||||||
|
<feFuncR type="table" tableValues="
|
||||||
|
|
||||||
|
0
|
||||||
|
|
||||||
|
1
|
||||||
|
|
||||||
|
"/>
|
||||||
|
<feFuncG type="table" tableValues=" 0 1 "/>
|
||||||
|
<feFuncB type="table" tableValues="0 1"/>
|
||||||
|
</feComponentTransfer>
|
||||||
|
</filter>
|
||||||
|
<filter id="componentTransfer2" x="0" y="0" width="100%" height="100%">
|
||||||
|
<feComponentTransfer>
|
||||||
|
<feFuncR type="table" tableValues="1 0"/>
|
||||||
|
<feFuncG type="table" tableValues="1 0"/>
|
||||||
|
<feFuncB type="table" tableValues="1 0"/>
|
||||||
|
</feComponentTransfer>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<rect x="0" y="0" width="200" height="200" fill="url(#gradient)"
|
||||||
|
style="filter: url(#componentTransfer1);" />
|
||||||
|
<rect x="0" y="0" width="200" height="200" fill="url(#gradient)"
|
||||||
|
style="filter: url(#componentTransfer2); transform: translateX(220px);" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg width="450" height="1170" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
||||||
|
<!-- Testing : http://www.w3.org/TR/SVG11/feature#SVG -->
|
||||||
|
<rect class="ko" x="10" y="10" height="25" width="430" />
|
||||||
|
<rect class="ok" x="10" y="10" height="25" width="430"
|
||||||
|
requiredFeatures="
|
||||||
|
http://www.w3.org/TR/SVG11/feature#SVG http://www.w3.org/TR/SVG11/feature#SVG
|
||||||
|
" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<radialGradient id="gradient1" gradientUnits="userSpaceOnUse"
|
||||||
|
cx="100" cy="100" r="100" fx="100" fy="100">
|
||||||
|
<stop offset="0%" stop-color="darkblue" />
|
||||||
|
<stop offset="50%" stop-color="skyblue" />
|
||||||
|
<stop offset="100%" stop-color="darkblue" />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="gradient2" gradientUnits="userSpaceOnUse"
|
||||||
|
cx="100" cy="100" r="100" fx="100" fy="100"
|
||||||
|
gradientTransform="
|
||||||
|
skewX(20)
|
||||||
|
translate(-35, 0)
|
||||||
|
">
|
||||||
|
<stop offset="0%" stop-color="darkblue" />
|
||||||
|
<stop offset="50%" stop-color="skyblue" />
|
||||||
|
<stop offset="100%" stop-color="darkblue" />
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
|
||||||
|
<rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translateX(220px);" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<g fill="grey"
|
||||||
|
transform="rotate(-10 50 100)
|
||||||
|
translate(-36 45.5)
|
||||||
|
skewX(40)
|
||||||
|
scale(1 0.5)">
|
||||||
|
<path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<use xlink:href="#heart" fill="none" stroke="red"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -275,3 +275,193 @@
|
|||||||
<text y=20>Default spacing</text>
|
<text y=20>Default spacing</text>
|
||||||
<text y=40 xml:space=preserve>Preserved spacing</text>
|
<text y=40 xml:space=preserve>Preserved spacing</text>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 220 100">
|
||||||
|
|
||||||
|
<rect width=100 height=100 onclick='alert("testtest")'/>
|
||||||
|
<rect width=100 height=100 onclick='alert("testtest")'/>
|
||||||
|
|
||||||
|
|
||||||
|
<rect x=120 width=100 height=100 rx=15 />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg>
|
||||||
|
<a href=" test.html " ondragexit='alert("testtest")' rel="nofollow noindex">Test</a>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 100 100" width=160 height=60 y=30>
|
||||||
|
<use href=#smiley />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="-10 -10 120 120">
|
||||||
|
|
||||||
|
<polygon stroke=black fill=none points="50,0 21,90 98,35 2,35 79,90"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 120 120">
|
||||||
|
<circle cx=60 cy=10 r=10>
|
||||||
|
<animate attributeName=cx dur=4s repeatCount=indefinite values=60;110;60;10;60 keyTimes=0;0.25;0.5;0.75;1 />
|
||||||
|
<animate attributeName=cy dur=4s repeatCount=indefinite values=10;60;110;60;10 keyTimes=0;0.25;0.5;0.75;1 />
|
||||||
|
</circle>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 120 120">
|
||||||
|
<circle cx=60 cy=10 r=10>
|
||||||
|
<animate attributeName=cx dur=4s calcMode=spline repeatCount=indefinite values=60;110;60;10;60 keyTimes=0;0.25;0.5;0.75;1 keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
|
||||||
|
<animate attributeName=cy dur=4s calcMode=spline repeatCount=indefinite values=10;60;110;60;10 keyTimes=0;0.25;0.5;0.75;1 keySplines="0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1"/>
|
||||||
|
</circle>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="-5 -5 10 10">
|
||||||
|
|
||||||
|
<rect width=100% height=100% />
|
||||||
|
|
||||||
|
|
||||||
|
<circle cx=50% cy=50% r=4 fill=white />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 30 10">
|
||||||
|
|
||||||
|
<line y1=9 x2=30 y2=9 stroke=black stroke-dasharray="4 1 2 3"/>
|
||||||
|
<rect x=11 y=1 width=8 height=8 stroke=green clip-path="circle() fill-box"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg id=svg_css_ex1 viewBox="0 0 100 100">
|
||||||
|
<path fill=none stroke=red d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg width=120 height=120 viewBox="0 0 120 120" version=1.1>
|
||||||
|
|
||||||
|
|
||||||
|
<rect x=10 y=35 height=15 width=0>
|
||||||
|
<animate attributeType=XML attributeName=width to=50 id=first begin=0s;third.end end=0s;third.end dur=4s />
|
||||||
|
</rect>
|
||||||
|
|
||||||
|
<rect x=60 y=60 height=15 width=0>
|
||||||
|
<animate attributeType=XML attributeName=width to=25 id=second begin=first.end dur=2s />
|
||||||
|
</rect>
|
||||||
|
|
||||||
|
<rect x=85 y=85 height=15 width=0>
|
||||||
|
<animate attributeType=XML attributeName=width to=25 id=third begin=second.end dur=2s />
|
||||||
|
</rect>
|
||||||
|
|
||||||
|
|
||||||
|
<text x=10 y=20 text-anchor=middle>0s</text>
|
||||||
|
<line x1=10 y1=25 x2=10 y2=105 stroke=grey stroke-width=.5 />
|
||||||
|
<text x=35 y=20 text-anchor=middle>2s</text>
|
||||||
|
<line x1=35 y1=25 x2=35 y2=105 stroke=grey stroke-width=.5 />
|
||||||
|
<text x=60 y=20 text-anchor=middle>4s</text>
|
||||||
|
<line x1=60 y1=25 x2=60 y2=105 stroke=grey stroke-width=.5 />
|
||||||
|
<text x=85 y=20 text-anchor=middle>6s</text>
|
||||||
|
<line x1=85 y1=25 x2=85 y2=105 stroke=grey stroke-width=.5 />
|
||||||
|
<text x=110 y=20 text-anchor=middle>8s</text>
|
||||||
|
<line x1=110 y1=25 x2=110 y2=105 stroke=grey stroke-width=.5 />
|
||||||
|
|
||||||
|
<line x1=10 y1=30 x2=110 y2=30 stroke=grey stroke-width=.5 />
|
||||||
|
<line x1=10 y1=105 x2=110 y2=105 stroke=grey stroke-width=.5 />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg>
|
||||||
|
<filter id=colorMeTheSame>
|
||||||
|
<feColorMatrix in=SourceGraphic values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
|
||||||
|
</filter>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 420 200">
|
||||||
|
<filter id=convolveMatrix1 x=0 y=0 width=100% height=100%>
|
||||||
|
<feConvolveMatrix kernelMatrix="1 1 0 0 0 0 0 0 -1"/>
|
||||||
|
</filter>
|
||||||
|
<filter id=convolveMatrix2 x=0 y=0 width=100% height=100%>
|
||||||
|
<feConvolveMatrix kernelMatrix="-1 0 0 0 0 0 0 0 1"/>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<image xlink:href=//developer.mozilla.org/files/6457/mdn_logo_only_color.png width=200 height=200 style=filter:url(#convolveMatrix1) />
|
||||||
|
<image xlink:href=//developer.mozilla.org/files/6457/mdn_logo_only_color.png width=200 height=200 style=filter:url(#convolveMatrix2);transform:translateX(220px) />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 100 100">
|
||||||
|
|
||||||
|
<pattern id=p1 width=.25 height=.25 patternTransform="rotate(20) skewX(30) scale(1 0.5)">
|
||||||
|
<circle cx=10 cy=10 r=10 />
|
||||||
|
</pattern>
|
||||||
|
|
||||||
|
|
||||||
|
<rect x=10 y=10 width=80 height=80 fill=url(#p1) />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg xml:lang=en viewBox="0 0 200 500">
|
||||||
|
<title>Scream—Comic Book text</title>
|
||||||
|
<style>@font-face{font-family:"SequentialistBB";src:url(fonts/SequentialistBB.woff2)format("woff2"),url(fonts/SequentialistBB.woff)format("woff");font-style:normal;font-weight:400}text{font-family:SequentialistBB,Papyrus-condensed,Impact,sans-serif-condensed,sans-serif;font-stretch:condensed;writing-mode:tb;glyph-orientation-vertical:0;writing-mode:vertical-rl;text-orientation:upright;font-size:28px}tspan{font-size:75%}path{fill:#fff;stroke:#000;stroke-width:2}</style>
|
||||||
|
<path d="M175,495 L140,465 C30,500 40,400 30,200 S70,10 100,10 S170,0 170,200 S170,400 150,450 Z"/>
|
||||||
|
<text x=100 y=12 rotate="0 15 30 45 60 75 90 105 120 135 150 165 180 195 210 225 240 255 270 285 300 315 330 345 360" textLength=450>
|
||||||
|
AAAaaaa<tspan>aaaa<tspan>aaaa<tspan>aahhh!</tspan>!</tspan>!</tspan>!</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 100 100">
|
||||||
|
<path id=MyPath fill=none stroke=silver d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50"/>
|
||||||
|
|
||||||
|
<text>
|
||||||
|
<textPath path="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50">
|
||||||
|
Quick brown fox jumps over the lazy dog.
|
||||||
|
</textPath>
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 420 200">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id=gradient gradientUnits=userSpaceOnUse x1=0 y1=0 x2=200 y2=0>
|
||||||
|
<stop stop-color=#ff0000 />
|
||||||
|
<stop offset=0.5 stop-color=#00ff00 />
|
||||||
|
<stop offset=1 stop-color=#0000ff />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<filter id=componentTransfer1 x=0 y=0 width=100% height=100%>
|
||||||
|
<feComponentTransfer>
|
||||||
|
<feFuncR type=table tableValues="0 1"/>
|
||||||
|
<feFuncG type=table tableValues="0 1"/>
|
||||||
|
<feFuncB type=table tableValues="0 1"/>
|
||||||
|
</feComponentTransfer>
|
||||||
|
</filter>
|
||||||
|
<filter id=componentTransfer2 x=0 y=0 width=100% height=100%>
|
||||||
|
<feComponentTransfer>
|
||||||
|
<feFuncR type=table tableValues="1 0"/>
|
||||||
|
<feFuncG type=table tableValues="1 0"/>
|
||||||
|
<feFuncB type=table tableValues="1 0"/>
|
||||||
|
</feComponentTransfer>
|
||||||
|
</filter>
|
||||||
|
|
||||||
|
<rect width=200 height=200 fill=url(#gradient) style=filter:url(#componentTransfer1) />
|
||||||
|
<rect width=200 height=200 fill=url(#gradient) style=filter:url(#componentTransfer2);transform:translateX(220px) />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg width=450 height=1170>
|
||||||
|
|
||||||
|
|
||||||
|
<rect class=ko x=10 y=10 height=25 width=430 />
|
||||||
|
<rect class=ok x=10 y=10 height=25 width=430 requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG http://www.w3.org/TR/SVG11/feature#SVG"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="0 0 420 200">
|
||||||
|
<radialGradient id=gradient1 gradientUnits=userSpaceOnUse cx=100 cy=100 r=100 fx=100 fy=100>
|
||||||
|
<stop offset=0% stop-color=darkblue />
|
||||||
|
<stop offset=50% stop-color=skyblue />
|
||||||
|
<stop offset=100% stop-color=darkblue />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id=gradient2 gradientUnits=userSpaceOnUse cx=100 cy=100 r=100 fx=100 fy=100 gradientTransform="skewX(20) translate(-35, 0)">
|
||||||
|
<stop offset=0% stop-color=darkblue />
|
||||||
|
<stop offset=50% stop-color=skyblue />
|
||||||
|
<stop offset=100% stop-color=darkblue />
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<rect width=200 height=200 fill=url(#gradient1) />
|
||||||
|
<rect width=200 height=200 fill=url(#gradient2) style=transform:translateX(220px) />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg viewBox="-40 0 150 100">
|
||||||
|
<g fill=grey transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)">
|
||||||
|
<path id=heart d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<use xlink:href=#heart fill=none stroke=red />
|
||||||
|
</svg>
|
||||||
Loading…
Reference in New Issue
Block a user