CSS 이전 또는 이후의 SVG 채우기 색상 변경

CSS 이전 또는 이후의 SVG 채우기 색상 변경

SVG 그래픽을 이렇게 넣었습니다.

a::before { content: url(filename.svg); }

태그 위를 마우스로 가리키면 지금처럼 SVG 파일을 새로 로드하지 않고 SVG가 채우기 색상을 변경하기를 원합니다.

a:hover::before { content: url(filename_white.svg); }

자바스크립트, jQuery 또는 내가 모르는 순수한 CSS를 사용하여 이것을 달성할 수 있습니까?

감사해요.

허용된 답변이 틀렸습니다. SVG 마스크와 배경색을 사용한 해결 방법을 적용하면 실제로 가능합니다.

p:after {
  width: 48px;
  height: 48px;
  display: inline-block;
  content: '';
  -webkit-mask: url(https://gh.max.ax/heart.svg) no-repeat 50% 50%;
  mask: url(https://gh.max.ax/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.red:after {
  background-color: red;
}

.green:after {
  background-color: green;
}

.blue:after {
  background-color: blue;
}

<p class="red">red heart</p>
<p class="green">green heart</p>
<p class="blue">blue heart</p>

실제로 SVG DOM 자체를 수정하는 것이 아니라 배경색을 변경하는 것입니다.이렇게 하면 이미지 또는 그라디언트를 배경으로 사용할 수도 있습니다.

---

갱신하다

J씨가 말씀하신 것처럼.안타깝게도 이 기능은 널리 지원되지 않습니다.

6년 만에 프리픽스 사용에 대한 지지도가 97%로 상승했습니다.

사용.contentproperty는 <img> 요소에서 svg와 기능적으로 동등한 (비 exposed) 마크업을 생성합니다.

다음과 같은 이유로 svg 문서 내부의 요소에 스타일을 적용할 수 없습니다.

1. 스타일은 문서 간에 캐스케이드할 수 없습니다.
2. <img>를 사용할 때(또는content, 또는 svg를 참조하는 CSS 이미지 속성) svg 문서가 보안 문제로 인해 브라우저에 노출되지 않습니다.

비슷한 질문이지만,background-image 여기저기에

따라서, 당신이 원하는 것을 하기 위해서는 어떻게든 위의 두 가지 점을 극복해야 합니다.인라인 svg 사용, 필터(<img>에 적용) 사용, 또는 질문에서와 같이 다양한 svg 파일(또는 데이터 URI) 생성과 같은 다양한 옵션이 있습니다.

설정 없이 @lmaoooooo의 답변과 유사한 기법display: inline-block. 보존하고자 할 때 내용을 구술할 때 유용합니다.display: inline확실하게 하기 위해:after내용은 이전 텍스트 내용과 독립적으로 새 줄로 묶지 않습니다.

또한 클립 경로를 사용하여 Safari에서 배경색이 새는 것을 방지합니다(이 기능의 유용성은 이미지/라인 높이/등에 따라 다름).

a[target="_blank"]:after {
  background-color: currentColor;
  content: "";
  padding: 0 0.5em;
  margin: 0 0.125rem;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath d='M1792 256v640h-128V475l-851 850-90-90 850-851h-421V256h640zm-512 1007h128v529H256V640h529v128H384v896h896v-401z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  clip-path: padding-box inset(0.28125em 0);
}

Lorem ipsum sumit dolar <a href="#" target="_blank">hello world</a>

그것을 하는 다른 방법이 방법이 있습니다.필터를 가지고 놀면 가능합니다.

콘텐츠에 svg url을 추가하고 색상을 변경하기만 하면 됩니다.

캔에 의하면아이유 모든 인기 형제들의 지지를 받고 있습니다.

p:after {
  width: 48px;
  height: 48px;
  content: url(https://gh.max.ax/heart.svg);
}

.red:after {
  filter: hue-rotate(14deg);
}

.green:after {
  filter: hue-rotate(120deg);
}

.blue:after {
  filter: hue-rotate(210deg);
}

.black:after {
  filter: grayscale(100%);
}

<p class="red">red heart</p>
<p class="green">green heart</p>
<p class="blue">blue heart</p>
<p class="black">black heart</p>

언급URL : https://stackoverflow.com/questions/21509982/change-svg-fill-color-in-before-or-after-css