Reference article 1: https://zongzi531.com/2020/12/16/img%E6%A0%87%E7%AD%BE%E4%BD%BF%E7%94%A8svg%E5%90%8E% E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98%E9%A2%9C%E8%89%B2/Reference article 2
: https://www.cnblogs.com/ slongs/p/11377817.html
I tried many methods, such as filter, shadow plus displacement, but the effect was not ideal, and finally used the method of article 2. Injection modifies the color directly.
Download link: https://download.csdn.net/download/kuilaurence/87681155
How to use:
We can see that the actual effect is that the svg file is finally directly imported into the html, so it is very convenient to operate, such as changing the color; when using it, just add οnlοad
to the img sticky note where the svg image to be controlled is located = "SVGInject(this)"
<!DOCTYPE html>
<html>
<head>
<title>SVG交互示例</title>
<style>
svg:hover rect,
svg:hover path {
stroke: red;
}
h1::before {
content: "!";
}
h1::after {
content: "→";
}
ol li::marker {
content: counter(list-item) ". ";
counter-increment: list-item;
}
</style>
</head>
<body>
<h1>SVG交互示例</h1>
<img src="./icon.svg" alt="SVG图像" onload="SVGInject(this)" width="200" height="200" />
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
</body>
<script src="./svg-inject.js"></script>
</html>
Learning of pseudo-classes:
Pseudo-classes in CSS are used to select a certain state or position of an element in order to apply styles to it. Here are some commonly used CSS pseudo-classes:
:hover - apply the style when the mouse is over the element.
:active - Applies the style when the user clicks on the element and keeps the mouse or finger down.
:focus - Applies the style when the element has focus, for example when the user tabs or clicks on the element.
:visited - selects a visited link.
:link - Select unvisited links.
:first-child - selects the first child of the parent element.
:last-child - selects the last child of the parent element.
:nth-child(n) - selects the nth child of the parent element.
:nth-last-child(n) - selects the last nth child of the parent element.
In addition to the above pseudo-classes, there are other pseudo-classes that can be used for more specific selectors, such as the ::before and ::after pseudo-element selectors, which can be used to insert content before and after an element. There is also the ::placeholder pseudo-class selector that can be used to select placeholder text for form elements.
:nth-of-type(n) - selects the nth child of a certain type within the parent element. For example, :nth-of-type(2) selects the second p element in the parent element.
:nth-last-of-type(n) - selects the last nth child of a type in the parent element.
:first-of-type - selects the first child element of a certain type within the parent element.
:last-of-type - selects the last child element of a certain type within the parent element.
:only-child - selects the only child element within the parent element.
:only-of-type - selects only child elements of a certain type within the parent element.
:not(selector) - selects all elements that do not match the given selector.
:checked - Selects a checked radio or checkbox.
:disabled - select disabled form elements.
:enabled - selects the available form elements.
:empty - selects elements with no children.
:target - Select the currently active anchor target element.
These CSS pseudo-classes can be used for more precise element selectors, allowing developers to more easily apply styles to elements and achieve richer interactive effects.
::before and ::after are pseudo-element selectors in CSS, which allow developers to insert content before or after elements, and define styles for these content. These pseudo-elements can achieve many interesting effects, such as adding decorative symbols before and after text, adding icons to links, and so on.
Using the ::before and ::after pseudo-elements requires the use of the content property in CSS, which defines the content to be inserted. For example, the following style will insert an exclamation point before all h1 elements:
h1::before { content: “!”; } The content attribute can accept various types of values, such as text strings, attribute values, counters, and so on. Here are some examples:
/* Add an arrow icon after all links*/
a::after { content: “→”; }
/* insert image using attribute value */
div::before { content: url(“path/to/image.png”); }
/* Use counter to insert numbers*/ ol
li::before { content: counter(list-item) "."; counter-increment: list-item ; colons), rather than the single colon used by pseudo-class selectors. In some older browsers, a single colon may be used to indicate a pseudo-element selector. However, for better compatibility, it is better to use the double-colon notation.
In addition, the ::before and ::after pseudo-elements are inline elements by default, and can be converted to block-level elements or other types of elements using the CSS display property. For example, the following style will insert an image, declared as a block-level element, before all paragraphs:
p::before { content: url("path/to/image.png"); display: block; } In summary, the ::before and ::after pseudo-element selectors are very useful for adding additional content to an element and styles to achieve richer page effects.