Artigo de referência 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/Artigo de referência 2
: https://www.cnblogs.com/ slongs/p/11377817.html
Tentei vários métodos, como filtro, sombra mais deslocamento, mas o efeito não foi o ideal e, finalmente, usei o método do artigo 2. A injeção modifica a cor diretamente.
Link para download: https://download.csdn.net/download/kuilaurence/87681155
Como usar:
Podemos ver que o efeito real é que o arquivo svg é finalmente importado diretamente para o html, por isso é muito conveniente operar, como alterar a cor; ao usá-lo, basta adicionar onlοad ao img sticky
note onde está localizada a imagem svg a ser controlada = "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>
Aprendizagem de pseudo-classes:
Pseudo-classes em CSS são usadas para selecionar um determinado estado ou posição de um elemento para aplicar estilos a ele. Aqui estão algumas pseudoclasses CSS comumente usadas:
:hover - aplica o estilo quando o mouse está sobre o elemento.
:active - Aplica o estilo quando o usuário clica no elemento e mantém o mouse ou o dedo pressionado.
:focus - Aplica o estilo quando o elemento tem foco, por exemplo, quando o usuário tabula ou clica no elemento.
:visited - seleciona um link visitado.
:link - Seleciona links não visitados.
:first-child - seleciona o primeiro filho do elemento pai.
:last-child - seleciona o último filho do elemento pai.
:nth-child(n) - seleciona o enésimo filho do elemento pai.
:nth-last-child(n) - seleciona o último enésimo filho do elemento pai.
Além das pseudoclasses acima, existem outras pseudoclasses que podem ser usadas para seletores mais específicos, como os seletores de pseudoelementos ::before e ::after, que podem ser usados para inserir conteúdo antes e depois de um elemento. Há também o seletor de pseudo-classe ::placeholder que pode ser usado para selecionar texto de espaço reservado para elementos de formulário.
:nth-of-type(n) - seleciona o enésimo filho de um certo tipo dentro do elemento pai. Por exemplo, :nth-of-type(2) seleciona o segundo elemento p no elemento pai.
:nth-last-of-type(n) - seleciona o último enésimo filho de um tipo no elemento pai.
:first-of-type - seleciona o primeiro elemento filho de um certo tipo dentro do elemento pai.
:last-of-type - seleciona o último elemento filho de um certo tipo dentro do elemento pai.
:only-child - seleciona o único elemento filho dentro do elemento pai.
:only-of-type - seleciona apenas elementos filho de um determinado tipo dentro do elemento pai.
:not(seletor) - seleciona todos os elementos que não correspondem ao seletor fornecido.
:checked - Seleciona um rádio ou caixa de seleção marcada.
:disabled - seleciona elementos de formulário desabilitados.
:enabled - seleciona os elementos de formulário disponíveis.
:empty - seleciona elementos sem filhos.
:target - Selecione o elemento de destino âncora atualmente ativo.
Essas pseudoclasses CSS podem ser usadas para seletores de elementos mais precisos, permitindo que os desenvolvedores apliquem estilos aos elementos com mais facilidade e obtenham efeitos interativos mais ricos.
::before e ::after são seletores de pseudo-elementos em CSS que permitem aos desenvolvedores inserir conteúdo antes ou depois de um elemento e definir estilos para o conteúdo. Esses pseudoelementos podem obter muitos efeitos interessantes, como adicionar símbolos decorativos antes e depois do texto, adicionar ícones a links e assim por diante.
A utilização dos pseudo-elementos ::before e ::after requer o uso da propriedade content em CSS, que define o conteúdo a ser inserido. Por exemplo, o estilo a seguir inserirá um ponto de exclamação antes de todos os elementos h1:
h1::before { content: “!”; } O atributo content pode aceitar vários tipos de valores, como strings de texto, valores de atributo, contadores e assim por diante. aqui estão alguns exemplos:
/* Adiciona um ícone de seta após todos os links*/
a::after { content: “→”; }
/* inserir imagem usando o valor do atributo */
div::before { content: url(“path/to/image.png”); }
/* Use counter para inserir números*/ ol
li::before { content: counter(list-item) "."; counter-increment: list-item ; dois-pontos), em vez dos dois-pontos simples usados pelos seletores de pseudoclasse. Em alguns navegadores mais antigos, dois pontos podem ser usados para indicar um seletor de pseudoelemento. No entanto, para melhor compatibilidade, é melhor usar a notação de dois-pontos duplos.
Além disso, os pseudo-elementos ::before e ::after são elementos inline por padrão e podem ser convertidos em elementos de nível de bloco ou outros tipos de elementos usando a propriedade de exibição do CSS. Por exemplo, o seguinte estilo irá inserir uma imagem, declarada como um elemento de nível de bloco, antes de todos os parágrafos:
p::before { content: url("path/to/image.png"); display: block; } Em resumo, os seletores de pseudo-elemento ::before e ::after são muito úteis para adicionar conteúdo adicional a um elemento e estilos para obter efeitos de página mais ricos.