JavaScript를 사용하여 SVG 요소 생성

JavaScript를 사용하여 SVG 요소를 만드는 방법은 무엇입니까? 다음 코드를 시도했습니다. varsvg=document.createElement('SVG');svg.setAttribute('style','border:1pxsolidblack');svg.setAttribute('width','600');svg.setAttribute(' 높이','250');svg.setAttribute

P粉662802882 2023-08-22 22:04:39 0  2  560

Vue는 컬러 SVG 파일을 동적으로 채웁니다.

VueJS3를 사용하여 Twitter 복제 앱을 만들고 있습니다. 트위터 로고를 .svg 파일로 저장했는데 <img/> 태그와 함께 사용할 수 있습니다. fill="#fff" 속성을 제공하면 <svg> 태그의 색상을 변경할 수도 있습니다. 하지만 이 .svg 파일을 여러 위치에서 다양한 색상으로 사용하고 싶습니다. 그래서 <img/> 태그에 fill-white, bg-whit 클래스를 제공하려고 했습니다.

P粉125450549 2024-01-03 22:39:20 0  2  634

SVG 뷰포트 내에 DIV 요소 배치

SVG 요소를 기준으로 HTMLDIV 요소를 배치하는 방법은 무엇입니까? 저는 D3를 사용하여 SVG 차트를 생성하고 있습니다. 오른쪽 하단의 범례 옆에 드롭다운을 추가하고 싶습니다. 해당 요소(일반 HTMLDIV 요소)가 있지만 차트에 올바르게 배치하는 방법을 모르겠습니다. SVG 요소의 위치 지정을 이해하지만 DIV 요소와 같은 것을 적용하는 방법을 모르겠습니다. 아래와 같이 뷰포트 외부에 배치하는 것 외에 다른 아이디어가 있습니까?

P粉803444331 2023-09-07 17:48:48 0  1  649

React를 사용하는 HTML의 SVG 경로 선택기

저는 사용자가 SVG를 업로드할 수 있는 페인팅 애플리케이션을 만들고 있습니다. 다양한 색상으로 채우고 SVG 위에 그린 후 지웁니다. 하지만 불행히도 SVG의 경로를 얻을 수 없습니다. 아래는 SVG 이미지입니다. 마우스를 가져가면 해당 마우스 오버 경로의 경로를 가져와 선택한 색상으로 채우고 싶습니다. Canvas와 SVG 경로를 사용해 보았습니다. 하지만 행운은 없습니다. Canvas에는 SVG를 그리는 데 사용하는 BeginPath 메서드가 있습니다. <?xmlversion='1.0'encoding='utf-8'?&am...

P粉566048790 2023-09-01 23:22:48 0  1  637

여러 SVG 파일을 동일한 비율로 확장

나는 거의 100개에 달하는 SVG 파일 모음을 가지고 있는데, 모두 아름답게 손으로 코딩되었으며 각각의 viewBox, 너비 및 높이가 신중하게 지정되어 있습니다. 이러한 SVG 파일은 너비, 높이 및 종횡비가 다릅니다. 어색한 문제가 있습니다. 저는 상대적인 크기에 관심을 갖고 보존하고 싶습니다. HTML 페이지에서는 "자연스러운" 크기, 즉 너비와 높이로 지정된 크기로 표시되기를 원합니다. 매우 간단합니다: <imgsrc="….svg">. 아마도 CSS는 {object-fit:n을...

P粉244730625 2024-01-10 17:27:19 0  1  573

Vue 3에서 svg 파일을 가져오는 방법은 무엇입니까?

다음을 시도했습니다: https://github.com/visualfanatic/vue-svg-loader/tree/master 그러나 vue-template-compiler가 Vue2에서 사용되기 때문에 버전 충돌이 있습니다. https://github.com/visualfanatic/vue-svg-loader를 시도했지만 특정 Vue 종속성이 누락되었습니다. TypeScript를 사용할 때 메모를 발견했습니다

P粉021854777 2023-08-23 08:37:27 0  2  836

javascript - svg 태그 내 요소의 너비와 높이를 svg 태그의 너비와 높이와 동일하게 만드는 방법은 무엇입니까?

내 svg 태그는 div 상자로 둘러싸여 있습니다. svg의 너비와 높이는 외부 상자의 너비와 높이를 100%로 설정합니다. 이때 div 상자의 너비와 높이를 수정합니다. svg의 요소는 항상 div 상자와 동일하지만 svg 내부의 경로 태그는 svg와 너비와 높이가 다릅니다. 그림에 표시된 것처럼 svg에 있는 요소의 전체 너비와 높이를 동일하게 만드는 방법은 다음과 같습니다. 세인트...

曾经蜡笔没有小新 2017-05-16 13:27:36 0  2  942

HTML 사이트에 페니키아 문자 SVG 적용

나는 같은 알파벳의 다른 SVG에서 했던 것처럼 내 실험적인 웹사이트에 삽입하기 위해 Inkscape에서 생성된 오픈 소스 SVG를 적용하려고 합니다. 내 사이트<svgversion="1.1"id="nūn"xmlns:svg="http://www.w3.org/2000/svg"xmlns="http: //의 페니키아어 "mem" 및 "nun" SVG

P粉558478150 2024-01-10 18:12:25 0  1  707

javascript - Firefox에서 svg 요소의 높이를 얻는 방법.

svg 요소의 clientHeight 및 offsetHeight는 Firefox에서는 0이고 정의되지 않지만 Chrome에서는 정상입니다. svg의 높이를 얻는 방법은 무엇입니까? {암호...}

淡淡烟草味 2017-05-19 10:30:24 0  2  532

페이지에서 세 개의 SVG 파일을 가운데 정렬하는 방법은 무엇입니까?

서로 겹쳐지면 그래픽을 만드는 세 개의 별도 SVG 파일이 있습니다. 첫 번째 SVG 파일은 빨간색 삼각형이고, 두 번째는 삼각형 내부에 있는 파란색 원이고, 세 번째는 삼각형 밑면에 있는 보라색 직사각형입니다(삼각형과 직사각형 사이에 약간의 공간이 있음). 내 목표는 세 개의 SVG 파일을 모두 페이지 중앙에 서로 포개어 두는 것입니다. 아래는 내 HTML 및 CSS 코드입니다. *{margin:0;padding:0;box-sizing:border-box;}.graphic{높이:1

P粉998100648 2023-09-07 14:20:58 0  2  684

React 및 TypeScript를 사용하여 정적 디렉터리에서 png 및 svg 파일을 로드하는 경로

동적으로 파비콘으로 사용하기 위해 /static/ 디렉토리에서 svg 및 png 파일을 경로로 로드하려고 합니다. ./src/model/view/<SomeView.ts>./static/<SomeFile.png|svg>./src/custom.d.ts./tsconfig.json./webpack 문서에 따라 모든 것을 구성했습니다. config.js./package.json 예제 보기 B

P粉122932466 2023-08-30 20:10:18 0  1  572

획 효과가 있는 SVG 그라디언트

이 코드를 찾았습니다<svgxmlns="http://www.w3.org/2000/svg"viewBox="-1-13434"><circlecx="16"cy="16"r="15.9155"class =" 진행률 표시줄__배경"/&

P粉193307465 2023-08-29 09:30:52 0  1  575

배경 이미지로 SVG 경로 요소 채우기

SVG<path> 요소에 배경 이미지를 설정할 수 있나요? 예를 들어, class="wall" 요소를 설정하면 CSS 스타일 .wall{fill:red;}는 작동하지만 .wall{Background-image:url(wall.jpg)}는 작동하지 않습니다. .wall{Background- 색상:빨간색;}아니요.

P粉021553460 2024-01-28 21:59:27 0  1  415

이미지와 같은 <use> 요소를 통해 SVG 아이콘의 크기를 조정하는 방법

내 HTML 문서에는 icon-x와 같은 ID 속성을 가진 많은 항목이 포함된 문서가 있습니다. 그런 다음 <divclass=container><svg><usexlink:href=#icon-x/></svg></div>와 같은 아이콘을 재사용하고 싶습니다. 그러나 이 예의 아이콘은 소스 SVG에서 다른 아이콘을 가질 수 있습니다. 크기. div.container에는 맞지만 컨테이너 내부의 svg에는 맞지 않기를 원합니다.

P粉184747536 2023-09-15 21:09:43 0  1  956

투명성과 애니메이션을 유지하면서 Next.js 13에서 애니메이션 SVG 파일을 가져오는 방법은 무엇입니까?

Next.js13에서 애니메이션 SVG 파일 가져오기 importImagefrom"next/image";exportdefaultfunctionHome(){return(<mainclassName="flexh-screenflex-colitems-center"><divclassName="containermt-12flex

P粉322106755 2024-03-27 13:38:40 0  1  524

CSS - svg 사용에 관한 질문

디자이너가 제공한 PNG 이미지가 SVG와 호환되지 않으면 사용하라고 했고, SVG와 호환되면 SVG를 사용하라고 했습니다. 이 호환성 문제에 대해 다음과 같이 작성된 Zhang Xinxu의 블로그를 보았습니다. &lt;svg width="96" height="96"&gt; &lt;image xlink:href="svg.svg" src="svg.png" width=&quo

高洛峰 2017-05-16 13:20:43 0  2  889

Angular에서 원형 SVG 온도 드래거를 만드시겠습니까?

다음은 제가 Angular에서 만들려고 하는 원형 썸 드래거의 정적 데모입니다. rinkle-dashoffset="-260" 설정을 사용하여 엄지손가락 뒤의 원형 경로 끝 근처에 엄지손가락/드래거를 배치하면 -260 음수 오프셋이 예상대로 작동하는 것을 볼 수 있습니다. <bodystyle="width:200px;height:200px;"><svg(mousedown)="onMouseDo

P粉135799949 2024-04-03 09:33:29 0  1  683

SVG 경로에 그라디언트를 추가할 수 있습니까?

내 웹사이트에 스크립트에 의해 실행되는 간단한 로딩 표시기를 추가하고 싶습니다. 사용자가 기다리는 동안 그라데이션과 회전이 포함된 간단한 호여야 합니다. 아직 애니메이션 부분을 시도하지 않았지만 지금은 정적 스타일이 붙어 있습니다. 이것이 내가 지금까지 얻은 것입니다: <svgversion="1.1"baseProfile="full"xmlns="http://www.w3.org/2000/svg"width=&quo

P粉402806175 2023-10-18 14:55:02 0  2  686

객체 태그를 사용하여 도메인 간 SVG 콘텐츠 문서 삽입

외부 도메인(예: (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg"))의 데이터를 포함하는 SVG를 갖고 로드 이벤트를 객체에 바인딩하는 것이 "합법적"입니까? 이 객체의 contentdocument 속성 SVGDOM을 통해 액세스하시겠습니까? SVG가 로컬 도메인에 있을 때 이 작업을 수행할 수 있지만 언제든지

P粉393030917 2023-10-31 18:04:21 0  1  1033

SVG 이미지를 사용하여 반응형 그리드 영역을 만들 수 없습니다

svg 이미지가 포함된 반응형 그리드 영역을 만들려고 하면 임의의 그리드 영역 너비와 같은 이상한 동작이 발생하고 이미지가 멈추지 않고 특정 지점까지 커지거나 줄어들 수 없습니다. 내가 얻은 가장 가까운 것은 *{box-sizing:border-box;}body{margin:0;}header{display:grid;grid-template-columns:auto1fr; background-color:green;padding:1r

P粉022140576 2023-08-30 19:15:16 0  1  609