我需要在svg路径上放置一些html元素。我怎样才能做到这一点 ? 我查找了foreignObject,但它只允许整个svg路径段呢?
这是我的svg代码
<svg id="svg" width="50%" height="50%" fill="none" stroke="#000000" stroke-linejoin="round" enable_background="new 0 0 1000 589" pretty_print="False" version="1.1" viewBox="0 0 271.87 232.08" xmlns="http://www.w3.org/2000/svg">
<g fill="#f9f9f9" fill-rule="evenodd" stroke-width=".97063">
<path d="m109.29 15.045 0.2913-7.5709-3.106-0.0971-21.451-0.97063-21.548-1.3589-48.92-4.2708-3.009-0.29119-0.38825 3.4943-7.2797 75.127-0.67944 7.0856-2.7178 28.634 0.38826 0.0971 13.395 1.2618 1.2618-6.7944 2.4266-1.9413 27.178 2.4266h0.19413l-2.4266-4.7561 12.327 0.87357 30.769 1.7471 19.218 0.87357 3.3002-91.045 0.67944 0.0971 0.0971-2.6207z" data-id="NM" data-name="New Mexico"/>
<path d="m246.35 13.201-0.19413-2.6207-0.0971-2.5236-0.19413-2.5236-3.6884 0.29119-37.563 1.7471-52.705 0.77651-22.519-0.29119-4.1737-0.0971h-1.553l-6.115-0.19413-1.9413-0.0971-4.0766-0.0971-1.9413-0.0971-0.2913 7.5709-0.0971 2.6207h0.58238l23.489 0.58238 24.848 0.29119 0.29119 33.196 1.7471 5.8238 3.8825 3.6884 4.1737 0.19413 0.87356-1.7471 5.7267 5.2414 7.4739 0.7765 1.3589 1.553 2.7178-1.2618 6.7944 3.2031v1.8442l2.5236-0.0971 2.6207-2.2324 4.8532 3.106 4.562 1.6501 3.106-4.2708 9.9004 4.659 3.6884-3.009 3.009-1.1648 2.4266 0.58238 9.1239-2.6207 4.8532 2.0383 4.3678 2.8148 3.7855 0.67944h0.0971l-0.0971-4.3678-1.0677-26.401-0.0971-4.3678-3.7855-19.607-0.58238-2.7178-0.0971-2.5236z" data-id="OK" data-name="Oklahoma"/>
<path d="m210.82 227.22-4.659-17.568v3.3002zm-1.0677-30.866-3.3002 6.212-0.38825 2.0383zm2.6207-4.562 3.106-4.0767-2.2324 1.3589zm10.968-9.9004-7.2797 3.7855 2.0383-0.38825zm0.97063-1.3589 2.0383-1.6501-0.7765 0.19413zm-115.12-162.87-0.67944-0.0971-3.3002 91.045-19.218-0.87357-30.769-1.7471-12.327-0.87357 2.4266 4.7561 10.58 10.58 6.0179 7.0856 7.9592 5.9208 5.6297 10.289 2.1354 10.774 4.562 3.009 3.5913 3.9796 5.1443 1.8442 7.4739 4.7561 3.3972 1.2618 4.659-4.659 1.456-4.9502 2.4266-4.7561 7.5709-3.009 2.9119 1.4559 8.4445 0.67945 7.668 4.7561 5.2414 0.97063-1.456 2.7178 3.009 1.9413 2.8148 3.3972 0.58238 3.5913 1.8442 2.4266 4.2708 10.289 4.2708 3.5913 3.3002 5.4355 4.1737 4.2708 1.8442 0.58238 1.553 11.065 4.562 2.5236 0.19412 3.4943 1.1648-0.29119 7.9592 9.7063 3.9796 0.87357 5.0473 3.009h7.765l5.6297 3.106 6.6974-1.4559-3.009-2.8148-2.7178-8.1533-1.0677-7.0856-1.553-2.3295 0.67944-4.7561-2.0383-0.19413-2.7178-4.4649 3.106 3.3002 3.5913-1.2618 1.9413-5.1444-3.8825-5.2414 5.8238 0.67944 2.7178-4.1737-0.38825-1.456 2.4266-3.2031-0.58238 2.8148 2.7178-2.1354-1.0677-3.7855 3.4943 1.8442 4.4649-2.5236-4.3678-4.562 2.7178 1.0677 5.0473 0.29119 6.6003-1.456 7.3768-4.9502 4.4649-3.6884 0.67944-2.7178 2.7178-2.8148-1.456-4.659 0.29119-2.9119 4.8532-2.1354-0.38826 5.1444h2.9119l-3.2031 2.7178 12.909-6.7944 2.1354-0.0971 1.3589-6.212h0.38826l1.4559-3.5913 0.67944-11.065 0.87357-4.4649-2.5236-7.9592-3.106-5.4355-0.0971-2.6207-3.2031-4.4649-1.9413-18.733-0.0971-2.3295-0.19413-2.4266-0.58238-8.5416-5.8238 0.19413-1.456-1.553-0.29119-0.0971h-0.0971l-3.7855-0.67944-4.3678-2.8148-4.8532-2.0383-9.1239 2.6207-2.4266-0.58238-3.009 1.1648-3.6884 3.009-9.9004-4.659-3.106 4.2708-4.562-1.6501-4.8532-3.106-2.6207 2.2324-2.5236 0.0971v-1.8442l-6.7944-3.2031-2.7178 1.2618-1.3589-1.553-7.4739-0.7765-5.7267-5.2414-0.87356 1.7471-4.1737-0.19413-3.8825-3.6884-1.7471-5.8238-0.29119-33.196-24.848-0.29119-23.489-0.58238h-0.58238z" data-id="TX" data-name="Texas"/>
</g>
</svg>
答案 0 :(得分:0)
您需要在路径中添加一个ID
<div fxLayout="column">
<div fxLayout="row">
<p class="page-heading" fxFlex="80%">Catalogue</p>
<div class="page-content-filter" fxLayoutAlign="end">
<button mat-button class="search-btn"><i class="material-icons"> search </i></button>
<input class="form-filter" matInput (keyup)="applyFilter($event.target.value)" placeholder="Search...">
</div>
</div>
<mat-grid-list cols="3" rowHeight="3:1">
<mat-grid-tile *ngFor="let asset of assets" >
<div class="full-width white">
<div fxLayout="column" fxLayoutGap="20px">
<div fxLayout="row" fxLayoutGap="15px">
<img fxFlex="10" style="width:50px;height:50px;" src="../../../../assets/images/images.jpeg" mat-card-image>
<b fxFlex="100">{{asset.name}}</b>
<mat-icon fxFlex="100" fxLayoutAlign="end end" class="small-icon">spa</mat-icon>
</div>
<div fxLayout="row" fxLayoutGap="15px">
<mat-icon class="small-icon">face</mat-icon>
<p class="small-heading"> Mohit Harshan</p>
<mat-divider vertical="true"></mat-divider>
<mat-icon class="small-icon">face</mat-icon>
<p class="small-heading">Video</p>
<mat-divider vertical="true"></mat-divider>
<mat-icon class="small-icon">face</mat-icon>
<p class="small-heading">5 points</p>
</div>
<mat-progress-bar class="progress" mode="determinate" value="40"></mat-progress-bar>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
在您的<path id="my-text" .......... />
内放置:
svg tags
您使用与 <text>
<textPath xlink:href="#text">text on a path</textPath>
</text>
希望这会有所帮助!
本文也可能对您有所帮助! https://vanseodesign.com/web-design/svg-text-on-a-path-part-1/
将元素放入svg中:
我发现的唯一方法是使用href=""
示例:
<foreignObject>
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject本文可以为您提供更多信息。可以通过x和y属性来定位位置。
答案 1 :(得分:0)
您需要在可调整大小的svg元素中以像素为单位找到路径的中心。为此,您需要:
请阅读我的代码上的注释。
在我的代码中,div #label
仅是一点。如果您需要在div中添加文本,则需要考虑div的宽度和高度。
// the values of the svg viewBox
svgVB = { x: 0, y: 0, w: 271.87, h: 232.08 };
//the bounding box for the path id="NM"
let BB = NM.getBBox();
//the center of the path in svg units
let center = {};
center.x = BB.x + BB.width / 2;
center.y = BB.y + BB.height / 2;
//the center of the path in html units
let htmlCenter = {};
// a function to get the position of the div
function positionDiv() {
//first get the size and the position of the svg element
let SVGClientRect = svg.getBoundingClientRect();
//calculate the htmlCenter x
htmlCenter.x = map(
center.x,
svgVB.x,
svgVB.w,
SVGClientRect.x,
SVGClientRect.x + SVGClientRect.width
);
//calculate the htmlCenter y
htmlCenter.y = map(
center.y,
svgVB.y,
svgVB.h,
SVGClientRect.y,
SVGClientRect.y + SVGClientRect.height
);
// set the styles for the label
label.style.left = htmlCenter.x + "px";
label.style.top = htmlCenter.y + "px";
}
//call the positionDiv function
positionDiv();
//call the positionDiv function on resize
window.setTimeout(function() {
positionDiv();
window.addEventListener("resize", positionDiv, false);
}, 15);
function map(n, a, b, _a, _b) {
let d = b - a;
let _d = _b - _a;
let u = _d / d;
return _a + n * u;
}
svg {
border: 1px solid;
}
#label {
width: 5px;
height: 5px;
border-radius: 50%;
background: red;
position: absolute;
}
<svg id="svg" width="50%" height="50%" fill="none" stroke="#000000" stroke-linejoin="round" enable_background="new 0 0 1000 589" pretty_print="False" version="1.1" viewBox="0 0 271.87 232.08" xmlns="http://www.w3.org/2000/svg">
<g fill="#f9f9f9" fill-rule="evenodd" stroke-width=".97063">
<path d="m109.29 15.045 0.2913-7.5709-3.106-0.0971-21.451-0.97063-21.548-1.3589-48.92-4.2708-3.009-0.29119-0.38825 3.4943-7.2797 75.127-0.67944 7.0856-2.7178 28.634 0.38826 0.0971 13.395 1.2618 1.2618-6.7944 2.4266-1.9413 27.178 2.4266h0.19413l-2.4266-4.7561 12.327 0.87357 30.769 1.7471 19.218 0.87357 3.3002-91.045 0.67944 0.0971 0.0971-2.6207z" id="NM" data-name="New Mexico"/>
<path d="m246.35 13.201-0.19413-2.6207-0.0971-2.5236-0.19413-2.5236-3.6884 0.29119-37.563 1.7471-52.705 0.77651-22.519-0.29119-4.1737-0.0971h-1.553l-6.115-0.19413-1.9413-0.0971-4.0766-0.0971-1.9413-0.0971-0.2913 7.5709-0.0971 2.6207h0.58238l23.489 0.58238 24.848 0.29119 0.29119 33.196 1.7471 5.8238 3.8825 3.6884 4.1737 0.19413 0.87356-1.7471 5.7267 5.2414 7.4739 0.7765 1.3589 1.553 2.7178-1.2618 6.7944 3.2031v1.8442l2.5236-0.0971 2.6207-2.2324 4.8532 3.106 4.562 1.6501 3.106-4.2708 9.9004 4.659 3.6884-3.009 3.009-1.1648 2.4266 0.58238 9.1239-2.6207 4.8532 2.0383 4.3678 2.8148 3.7855 0.67944h0.0971l-0.0971-4.3678-1.0677-26.401-0.0971-4.3678-3.7855-19.607-0.58238-2.7178-0.0971-2.5236z" id="OK" data-name="Oklahoma"/>
<path d="m210.82 227.22-4.659-17.568v3.3002zm-1.0677-30.866-3.3002 6.212-0.38825 2.0383zm2.6207-4.562 3.106-4.0767-2.2324 1.3589zm10.968-9.9004-7.2797 3.7855 2.0383-0.38825zm0.97063-1.3589 2.0383-1.6501-0.7765 0.19413zm-115.12-162.87-0.67944-0.0971-3.3002 91.045-19.218-0.87357-30.769-1.7471-12.327-0.87357 2.4266 4.7561 10.58 10.58 6.0179 7.0856 7.9592 5.9208 5.6297 10.289 2.1354 10.774 4.562 3.009 3.5913 3.9796 5.1443 1.8442 7.4739 4.7561 3.3972 1.2618 4.659-4.659 1.456-4.9502 2.4266-4.7561 7.5709-3.009 2.9119 1.4559 8.4445 0.67945 7.668 4.7561 5.2414 0.97063-1.456 2.7178 3.009 1.9413 2.8148 3.3972 0.58238 3.5913 1.8442 2.4266 4.2708 10.289 4.2708 3.5913 3.3002 5.4355 4.1737 4.2708 1.8442 0.58238 1.553 11.065 4.562 2.5236 0.19412 3.4943 1.1648-0.29119 7.9592 9.7063 3.9796 0.87357 5.0473 3.009h7.765l5.6297 3.106 6.6974-1.4559-3.009-2.8148-2.7178-8.1533-1.0677-7.0856-1.553-2.3295 0.67944-4.7561-2.0383-0.19413-2.7178-4.4649 3.106 3.3002 3.5913-1.2618 1.9413-5.1444-3.8825-5.2414 5.8238 0.67944 2.7178-4.1737-0.38825-1.456 2.4266-3.2031-0.58238 2.8148 2.7178-2.1354-1.0677-3.7855 3.4943 1.8442 4.4649-2.5236-4.3678-4.562 2.7178 1.0677 5.0473 0.29119 6.6003-1.456 7.3768-4.9502 4.4649-3.6884 0.67944-2.7178 2.7178-2.8148-1.456-4.659 0.29119-2.9119 4.8532-2.1354-0.38826 5.1444h2.9119l-3.2031 2.7178 12.909-6.7944 2.1354-0.0971 1.3589-6.212h0.38826l1.4559-3.5913 0.67944-11.065 0.87357-4.4649-2.5236-7.9592-3.106-5.4355-0.0971-2.6207-3.2031-4.4649-1.9413-18.733-0.0971-2.3295-0.19413-2.4266-0.58238-8.5416-5.8238 0.19413-1.456-1.553-0.29119-0.0971h-0.0971l-3.7855-0.67944-4.3678-2.8148-4.8532-2.0383-9.1239 2.6207-2.4266-0.58238-3.009 1.1648-3.6884 3.009-9.9004-4.659-3.106 4.2708-4.562-1.6501-4.8532-3.106-2.6207 2.2324-2.5236 0.0971v-1.8442l-6.7944-3.2031-2.7178 1.2618-1.3589-1.553-7.4739-0.7765-5.7267-5.2414-0.87356 1.7471-4.1737-0.19413-3.8825-3.6884-1.7471-5.8238-0.29119-33.196-24.848-0.29119-23.489-0.58238h-0.58238z" id="TX" data-name="Texas"/>
</g>
</svg>
<div id="label"></div>